/* ===========================================================
   SISTEMA TIPOGRÁFICO ÚNICO — 2 fuentes
   ===========================================================
   Inter           → UI, body, labels, buttons, inputs (sans)
   Playfair Display → títulos grandes, eyebrow, hero (serif editorial)
   =========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:wght@500;600;700;800;900&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* Superficies (refinadas con más contraste de niveles) */
    --bg: #0a0a0f;
    --surface: #13131c;
    --surface-2: #1c1c28;
    --surface-3: #252534;
    --border: #2e2e40;
    --border-strong: #3a3a50;

    /* Texto con mejor legibilidad */
    --text: #f1f1f5;          /* antes #e8e8f0 — más nítido */
    --text-muted: #a5a5b8;    /* antes #8888a0 — 4.5:1 AA */
    --text-subtle: #6e6e80;   /* solo para labels MUY secundarios */

    /* Paleta de marca (primaria/secundaria definidas) */
    --accent: #7c5cfc;
    --accent-hover: #6a4ae0;
    --accent-soft: rgba(124, 92, 252, 0.12);
    --accent-glow: rgba(124, 92, 252, 0.3);

    /* Semánticos (uso restringido) */
    --success: #34d399;
    --success-soft: rgba(52, 211, 153, 0.12);
    --warning: #facc15;
    --warning-soft: rgba(250, 204, 21, 0.12);
    --danger: #f87171;
    --danger-soft: rgba(248, 113, 113, 0.12);
    --info: #60a5fa;
    --info-soft: rgba(96, 165, 250, 0.12);

    /* Backwards compat (mantener los alias para no romper) */
    --pink: #f472b6;
    --blue: #60a5fa;
    --green: #34d399;
    --orange: #fb923c;
    --red: #f87171;
    --yellow: #facc15;

    /* Sombras con profundidad */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.35);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.45);
    --shadow-accent: 0 4px 18px rgba(124, 92, 252, 0.22);

    /* Radios estándar */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;

    /* Card base */
    --card-bg: var(--surface);

    /* =====================================================
       DESIGN SYSTEM V3 — Meta/Google-grade tokens
       (sistema añadido sin romper tokens previos)
       ===================================================== */

    /* ── Typography scale (Material Type 3 + SF-esque) ── */
    --font-sans: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-mono: 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

    --text-xs: 0.75rem;    /* 12 */
    --text-sm: 0.8125rem;  /* 13 */
    --text-base: 0.875rem; /* 14 */
    --text-md: 0.9375rem;  /* 15 */
    --text-lg: 1rem;       /* 16 */
    --text-xl: 1.125rem;   /* 18 */
    --text-2xl: 1.375rem;  /* 22 */
    --text-3xl: 1.75rem;   /* 28 */
    --text-4xl: 2.25rem;   /* 36 */

    --leading-tight: 1.2;
    --leading-snug: 1.35;
    --leading-normal: 1.5;
    --leading-relaxed: 1.65;

    --tracking-tight: -0.02em;   /* headings large */
    --tracking-normal: 0;
    --tracking-wide: 0.02em;     /* small caps / labels */
    --tracking-wider: 0.05em;    /* eyebrow / ALL CAPS */

    /* ── Spacing 4pt grid ── */
    --space-0: 0;
    --space-1: 0.25rem;   /* 4 */
    --space-2: 0.5rem;    /* 8 */
    --space-3: 0.75rem;   /* 12 */
    --space-4: 1rem;      /* 16 */
    --space-5: 1.25rem;   /* 20 */
    --space-6: 1.5rem;    /* 24 */
    --space-8: 2rem;      /* 32 */
    --space-10: 2.5rem;   /* 40 */
    --space-12: 3rem;     /* 48 */
    --space-16: 4rem;     /* 64 */

    /* ── Elevation scale (Material 3 dark tones) ── */
    --elev-0: none;
    --elev-1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.02);
    --elev-2: 0 3px 6px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(255, 255, 255, 0.03);
    --elev-3: 0 6px 12px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(255, 255, 255, 0.04);
    --elev-4: 0 12px 24px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.05);
    --elev-5: 0 24px 48px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.06);
    /* Elevation con tinte accent para CTAs "levantados" */
    --elev-accent: 0 8px 20px -4px color-mix(in srgb, var(--accent) 35%, transparent);

    /* ── Motion system (Material Emphasized + Apple fluid) ── */
    --dur-instant: 80ms;
    --dur-fast: 150ms;
    --dur-base: 220ms;
    --dur-slow: 320ms;
    --dur-slower: 460ms;

    /* Curves */
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);          /* Material standard */
    --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);        /* Material emphasized */
    --ease-decelerate: cubic-bezier(0, 0, 0, 1);          /* entering */
    --ease-accelerate: cubic-bezier(0.3, 0, 1, 1);        /* exiting */
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.3); /* playful spring */

    /* ── Z-index scale ── */
    --z-base: 0;
    --z-raised: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-nav: 300;
    --z-overlay: 1000;
    --z-modal: 1100;
    --z-popover: 1200;
    --z-toast: 1300;
    --z-tooltip: 1400;

    /* ── Focus ring (WCAG AA visible, keyboard-only) ── */
    --focus-ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
    --focus-ring-soft: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent);

    /* ── Interactive state overlays (Material state layers) ── */
    --state-hover: rgba(255, 255, 255, 0.04);
    --state-pressed: rgba(255, 255, 255, 0.08);
    --state-focus: rgba(124, 92, 252, 0.12);
    --state-selected: rgba(124, 92, 252, 0.14);

    /* ── Density (compact controls) ── */
    --control-h-sm: 32px;
    --control-h-md: 40px;
    --control-h-lg: 48px;

    /* ── Borders with specific semantic use ── */
    --border-subtle: rgba(255, 255, 255, 0.05);
    --border-default: var(--border);
    --border-hover: color-mix(in srgb, var(--accent) 45%, var(--border));
    --border-focus: var(--accent);
}

/* =========================================================
   GLOBAL POLISH — Meta/Google-grade foundation
   ========================================================= */

/* Render quality: subpixel + font features */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11', 'ss01';
    font-variant-ligatures: common-ligatures;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: 16px;
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-normal);
}

/* Números tabulares para data y stats (no saltan al cambiar) */
.num-tabular, .home-stat-chip-value, .pm-progress-label strong,
.home-library-hero-stats strong, .bib-v2-chip span,
.home-library-hero-stats, .pm-counter, .home-stat-value {
    font-variant-numeric: tabular-nums;
}

/* Selection color on-brand */
::selection {
    background: color-mix(in srgb, var(--accent) 40%, transparent);
    color: var(--text);
}

/* Placeholder color consistent */
::placeholder { color: var(--text-muted); opacity: 0.72; }

/* ===== Scrollbars refinados (dark-mode first) ===== */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--surface-3) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--surface-3);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
    transition: background var(--dur-fast) var(--ease-standard);
}
*::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 55%, var(--surface-3));
    background-clip: content-box;
}

/* ===== Focus-visible: SOLO teclado, NO en mouse ===== */
/* Esto es CRÍTICO para feel Google/Meta: click no muestra ring, Tab sí */
*:focus { outline: none; }
*:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: inherit;
    transition: box-shadow var(--dur-fast) var(--ease-standard);
}
/* Para inputs que ya tienen un ring propio, usamos variante suave */
input:focus-visible, textarea:focus-visible, select:focus-visible {
    box-shadow: var(--focus-ring-soft);
}

/* Links: si alguno escapa del estilo por defecto */
a {
    color: var(--accent);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--accent-hover); }

/* ===== Tap-highlight transparente (mobile) ===== */
* { -webkit-tap-highlight-color: transparent; }
button, a, [role="button"] { touch-action: manipulation; }

/* ===== Respeto a prefers-reduced-motion ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== Image defaults (no layout shift) ===== */
img, video { max-width: 100%; height: auto; display: block; }

/* ===== Typography roles utility classes (opcionales) ===== */
.t-display { font-size: var(--text-4xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 700; }
.t-headline { font-size: var(--text-3xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); font-weight: 700; }
.t-title    { font-size: var(--text-2xl); line-height: var(--leading-snug); font-weight: 600; }
.t-body     { font-size: var(--text-base); line-height: var(--leading-normal); }
.t-label    { font-size: var(--text-sm); line-height: var(--leading-snug); font-weight: 500; }
.t-overline { font-size: var(--text-xs); line-height: var(--leading-snug); letter-spacing: var(--tracking-wider); font-weight: 600; text-transform: uppercase; color: var(--text-muted); }

/* ===== Keyboard-only visibility helper ===== */
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sr-only-focusable:focus-visible {
    position: static; width: auto; height: auto;
    clip: auto; white-space: normal;
}

/* ========== LOGIN SCREEN ========== */
.login-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem;
}

/* Global hidden utility */
.hidden { display: none !important; }

.login-screen.hidden { display: none; }

.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 3rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.login-card::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
    opacity: 0.5;
    pointer-events: none;
}

.login-badge {
    display: inline-block;
    background: rgba(124, 92, 252, 0.15);
    border: 1px solid rgba(124, 92, 252, 0.3);
    color: var(--accent);
    padding: 0.35rem 1rem;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    position: relative;
}

.login-card h1 {
    font-size: 1.8rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    position: relative;
    background: linear-gradient(135deg, #fff 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.login-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 2rem;
    position: relative;
}

.login-input-group {
    position: relative;
    margin-bottom: 1rem;
}

.login-input {
    width: 100%;
    padding: 0.9rem 1.2rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 1rem;
    text-align: center;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    transition: border-color 0.2s;
}

.login-input::placeholder {
    color: var(--text-muted);
    text-transform: none;
    letter-spacing: normal;
}

.login-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.login-btn {
    width: 100%;
    padding: 0.9rem;
    background: var(--accent);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.login-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.login-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.login-error {
    color: var(--red);
    font-size: 0.8rem;
    margin-top: 0.8rem;
    min-height: 1.2rem;
    position: relative;
}

/* ========== APP SCREEN ========== */
.app-screen {
    display: none;
}

.app-screen.visible { display: block; }

/* ========== HEADER ========== */
.header {
    background: linear-gradient(135deg, #12121a 0%, #1a1028 50%, #12121a 100%);
    border-bottom: 1px solid var(--border);
    padding: 2rem 2rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.header::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 50% 50%, var(--accent-glow) 0%, transparent 50%);
    opacity: 0.4;
    pointer-events: none;
}

.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 0 auto 1rem;
    position: relative;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.header-icon-btn {
    background: rgba(124, 92, 252, 0.1);
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-icon-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(124, 92, 252, 0.2);
}

.header-nav-btn {
    width: auto !important;
    padding: 0 0.9rem;
    height: 36px;
    font-size: 0.8rem !important;
    font-weight: 600;
    text-decoration: none;
    gap: 0.35rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(124, 92, 252, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.35);
    color: #c4b5fd;
}

.header-nav-btn:hover {
    background: rgba(124, 92, 252, 0.25);
    color: white;
    border-color: #8B5CF6;
}

.header-nav-bib {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(52, 211, 153, 0.1)) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #6ee7b7 !important;
}

.header-nav-bib:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(52, 211, 153, 0.2)) !important;
    color: white !important;
    border-color: #10b981 !important;
}

.header-badge-sm {
    background: rgba(124, 92, 252, 0.15);
    border: 1px solid rgba(124, 92, 252, 0.3);
    color: var(--accent);
    padding: 0.25rem 0.8rem;
    border-radius: 50px;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.logout-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.3rem 0.8rem;
    border-radius: 8px;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}

.logout-btn:hover {
    border-color: var(--red);
    color: var(--red);
}

.header h1 {
    font-size: 1.8rem;
    font-weight: 800;
    position: relative;
    background: linear-gradient(135deg, #fff 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.4rem;
}

.header p {
    color: var(--text-muted);
    font-size: 0.9rem;
    position: relative;
}

/* ========== USAGE COUNTER ========== */
/* ========== APP LAYOUT ========== */
.app-layout {
    display: flex;
    gap: 1rem;
    max-width: 1200px;
    margin: 0 auto;
    align-items: flex-start;
}

.app-main {
    flex: 1;
    min-width: 0;
}

/* ========== RIGHT SIDEBAR ========== */
.sidebar-right {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    position: sticky;
    top: 16px;
    margin-top: 8rem;
}

.sidebar-widget {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0.8rem;
}

/* Nav Widget */
.sidebar-nav-widget {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.sidebar-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    width: 100%;
    font-family: inherit;
}

.snav-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
}

.snav-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
    line-height: 1.3;
    font-weight: 400;
}

.sidebar-nav-link:hover {
    background: rgba(124, 92, 252, 0.1);
}
.sidebar-nav-link:hover .snav-title {
    color: var(--accent);
}

.sidebar-nav-bib .snav-title {
    color: #6ee7b7 !important;
}
.sidebar-nav-bib:hover {
    background: rgba(16, 185, 129, 0.12) !important;
}

.sidebar-nav-fav .snav-title {
    color: #facc15 !important;
}
.sidebar-nav-fav:hover {
    background: rgba(250, 204, 21, 0.1) !important;
}

/* Usage Widget */
.sidebar-widget-title {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--border);
}

.usage-rows {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.usage-row {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.usage-row-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.usage-row-label {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
}

.usage-row-nums {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.usage-pill-num {
    font-weight: 800;
    font-size: 0.78rem;
    color: #4ade80;
}

.usage-row-bar {
    width: 100%;
    height: 5px;
    background: var(--surface-3);
    border-radius: 3px;
    overflow: hidden;
}

.usage-row-fill {
    height: 100%;
    border-radius: 3px;
    background: #4ade80;
    transition: width 0.5s ease, background 0.3s;
    width: 100%;
}

/* Color states */
.usage-row.status-green .usage-pill-num { color: #4ade80; }
.usage-row.status-green .usage-row-fill { background: #4ade80; }

.usage-row.status-yellow .usage-pill-num { color: #facc15; }
.usage-row.status-yellow .usage-row-fill { background: #facc15; }

.usage-row.status-red .usage-pill-num { color: #f87171; }
.usage-row.status-red .usage-row-fill { background: #f87171; }

/* Stack sidebar below on smaller screens */
@media (max-width: 1100px) {
    .app-layout {
        flex-direction: column;
    }
    .sidebar-right {
        width: 100%;
        flex-direction: row;
        gap: 0.75rem;
        position: static;
    }
    .sidebar-nav-widget {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        flex: 0 0 auto;
    }
    .sidebar-usage-widget {
        flex: 1;
    }
}

@media (max-width: 700px) {
    .sidebar-right {
        flex-direction: column;
    }
}

/* Legacy compat */
.usage-bar {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 2rem 0;
}

.usage-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.usage-icon { font-size: 1rem; }

.usage-info strong {
    color: var(--accent);
    font-size: 1.1rem;
    font-weight: 800;
}

.usage-sep {
    color: var(--text-muted);
    opacity: 0.5;
}

.usage-progress-track {
    width: 100%;
    height: 6px;
    background: var(--surface-2);
    border-radius: 10px;
    overflow: hidden;
}

.usage-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, #9333ea 100%);
    border-radius: 10px;
    transition: width 0.6s ease;
}

.usage-progress-bar.low {
    background: linear-gradient(90deg, var(--orange) 0%, var(--red) 100%);
}

.usage-progress-bar.depleted {
    background: var(--red);
}

/* ========== TABS ========== */
.tabs-bar {
    max-width: 900px;
    margin: 1.2rem auto 0;
    padding: 0 2rem;
    display: flex;
    gap: 0.5rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabs-bar::-webkit-scrollbar { display: none; }

.tab-btn {
    padding: 0.7rem 1.5rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    top: 1px;
}

.tab-btn:hover {
    color: var(--text);
}

.tab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ========== FORM ========== */
.form-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

.form-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2rem;
}

.form-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    background: linear-gradient(135deg, #fff 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.form-section-desc {
    color: var(--text-muted);
    font-size: 0.82rem;
    margin-bottom: 1.5rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-row-half {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 600px) {
    .form-row-half { grid-template-columns: 1fr; }
}

.form-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.form-input,
.form-select,
.form-textarea {
    padding: 0.7rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.88rem;
    transition: border-color 0.2s;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-select {
    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='none' stroke='%238888a0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

/* NIVEL CARDS */
.nivel-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
}

.nivel-cards-sm .nivel-card {
    padding: 0.7rem;
}

.nivel-cards-sm .nivel-card p {
    display: none;
}

.nivel-card {
    cursor: pointer;
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    text-align: center;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    font-family: 'Poppins', 'Inter', sans-serif;
    color: var(--text);
}

.nivel-card:hover {
    border-color: var(--accent);
}

.nivel-card.selected {
    border-color: var(--accent);
    background: rgba(124, 92, 252, 0.1);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.nivel-icon {
    font-size: 1.6rem;
    line-height: 1;
}

.nivel-card strong {
    font-size: 0.8rem;
}

.nivel-card p {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
    line-height: 1.5;
}

.form-textarea::placeholder {
    color: var(--text-muted);
}

.generate-btn {
    width: 100%;
    padding: 1.1rem 1.2rem;
    background: linear-gradient(135deg, var(--accent) 0%, #9333ea 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.generate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--accent-glow);
}

.generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ========== LOADING ========== */
.loading-state {
    display: none;
    text-align: center;
    padding: 3rem 2rem;
    max-width: 900px;
    margin: 0 auto;
}

.loading-state.visible { display: block; }

.loader {
    width: 50px;
    height: 50px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 1.5rem;
}

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

.loading-state h3 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.loading-state p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* ========== RESULTS ========== */
.results-container {
    display: none;
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem;
}

.results-container.visible { display: block; }

.results-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.results-header h2 {
    font-size: 1.4rem;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, #c4b5fd 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.results-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

/* -- Primary action buttons (flow: Copy Out, Imagen, Escaleta) -- */
.action-btn {
    padding: 0.55rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.action-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(124, 92, 252, 0.08);
}

.action-btn.copied {
    border-color: var(--green);
    color: var(--green);
}

/* Flow buttons (next-step actions) get accent highlight */
.action-btn.flow-btn {
    background: rgba(124, 92, 252, 0.08);
    border-color: rgba(124, 92, 252, 0.35);
    color: var(--accent);
}

.action-btn.flow-btn:hover {
    background: rgba(124, 92, 252, 0.18);
    border-color: var(--accent);
    color: #fff;
}

/* Save button gets green tint */
.action-btn.save-lib-btn {
    background: rgba(52, 211, 153, 0.08);
    border-color: rgba(52, 211, 153, 0.3);
    color: var(--green);
}

.action-btn.save-lib-btn:hover {
    background: rgba(52, 211, 153, 0.18);
    border-color: var(--green);
    color: #fff;
}

/* Nueva busqueda button - prominent */
.new-search-btn {
    padding: 0.55rem 1.2rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
}

.new-search-btn:hover {
    border-color: var(--orange);
    color: var(--orange);
    background: rgba(251, 146, 60, 0.08);
}

.results-content {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 2.2rem 2.5rem;
    line-height: 1.75;
    position: relative;
}

/* Section copy buttons */
.section-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.74rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: 0.6rem;
    vertical-align: middle;
    font-weight: 500;
}

.section-copy-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.section-copy-btn.copied {
    border-color: var(--green);
    color: var(--green);
}

/* Hook cards */
.hook-card {
    display: block;
    padding: 1rem 1.2rem;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    margin: 0.6rem 0 0.3rem;
    transition: border-color 0.2s;
}

.hook-card:hover {
    border-color: rgba(124, 92, 252, 0.25);
}

.hook-card-text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--text);
    font-weight: 500;
}

/* Hook inline edit mode */
.hook-edit-area {
    width: 100%;
    background: var(--surface-3);
    border: 1px solid var(--accent);
    border-radius: 8px;
    color: var(--text);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.93rem;
    line-height: 1.6;
    padding: 0.75rem 1rem;
    resize: vertical;
    min-height: 60px;
    outline: none;
}

.hook-edit-area:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-glow);
}

.hook-edit-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.hook-edit-save {
    padding: 0.4rem 1rem;
    background: var(--accent);
    border: none;
    border-radius: 8px;
    color: #fff;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.hook-edit-save:hover {
    background: var(--accent-hover);
}

.hook-edit-cancel {
    padding: 0.4rem 1rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.hook-edit-cancel:hover {
    border-color: var(--red);
    color: var(--red);
}

/* Legacy clickable hooks (keep for backwards compat) */
.hook-clickable {
    font-weight: 500;
}

/* Hook action buttons row */
.hook-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.65rem;
    padding-top: 0.55rem;
    border-top: 1px solid rgba(42, 42, 58, 0.6);
}

.hook-regen-btn,
.hook-edit-btn {
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0.38rem 0.9rem;
    border-radius: 8px;
    transition: all 0.2s;
    font-family: 'Poppins', 'Inter', sans-serif;
    white-space: nowrap;
    font-weight: 500;
}

.hook-regen-btn {
    background: rgba(124, 92, 252, 0.1);
    border: 1px solid rgba(124, 92, 252, 0.3);
    color: var(--accent);
}

.hook-regen-btn:hover {
    background: rgba(124, 92, 252, 0.25);
    border-color: var(--accent);
    color: white;
    transform: translateY(-1px);
}

.hook-edit-btn {
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: var(--blue);
}

.hook-edit-btn:hover {
    background: rgba(96, 165, 250, 0.25);
    border-color: var(--blue);
    color: white;
    transform: translateY(-1px);
}

/* "Usar este hook" button inside modal */
.use-hook-btn {
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0.35rem 0.85rem;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 8px;
    color: #6ee7b7;
    transition: all 0.2s;
    font-family: 'Poppins', 'Inter', sans-serif;
    white-space: nowrap;
    font-weight: 500;
}

.use-hook-btn:hover {
    background: rgba(16, 185, 129, 0.3);
    border-color: #10b981;
    color: white;
    transform: translateY(-1px);
}

/* Hook replaced flash animation */
.hook-replaced {
    animation: hookFlash 1.5s ease;
}

@keyframes hookFlash {
    0% { background: rgba(16, 185, 129, 0.3); }
    100% { background: transparent; }
}

/* Save to library button on hooks */
.fav-btn {
    cursor: pointer;
    font-size: 0.78rem;
    padding: 0.38rem 0.9rem;
    background: rgba(52, 211, 153, 0.08);
    border: 1px solid rgba(52, 211, 153, 0.25);
    border-radius: 8px;
    color: var(--green);
    transition: all 0.2s;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 500;
    white-space: nowrap;
    margin-left: auto;
}

.fav-btn:hover {
    background: rgba(52, 211, 153, 0.2);
    border-color: var(--green);
    color: #fff;
    transform: translateY(-1px);
}

.fav-btn.saved {
    background: rgba(52, 211, 153, 0.15);
    border-color: var(--green);
    color: var(--green);
    pointer-events: none;
}

/* Markdown rendering */
.results-content h1,
.results-content h2,
.results-content h3 {
    margin-top: 2rem;
    margin-bottom: 0.8rem;
}

.results-content h1:first-child,
.results-content h2:first-child,
.results-content h3:first-child {
    margin-top: 0;
}

.results-content h1 { font-size: 1.45rem; font-weight: 800; }

.results-content h2 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent);
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(124, 92, 252, 0.2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.results-content h3 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--pink);
}

.results-content p {
    margin-bottom: 0.9rem;
    font-size: 0.92rem;
}

.results-content ul, .results-content ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}

.results-content li {
    margin-bottom: 0.5rem;
    font-size: 0.92rem;
}

.results-content strong {
    color: #fff;
    font-weight: 600;
}

.results-content em {
    color: var(--blue);
    font-style: italic;
}

.results-content blockquote {
    border-left: 3px solid var(--accent);
    padding: 1rem 1.4rem;
    margin: 1.2rem 0;
    background: var(--surface-2);
    border-radius: 0 10px 10px 0;
    color: var(--text-muted);
    font-size: 0.92rem;
}

.results-content code {
    background: var(--surface-2);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.85em;
}

.results-content hr {
    border: none;
    border-top: 1px solid var(--border);
    margin: 2rem 0;
}

.results-content a {
    color: var(--accent);
    text-decoration: none;
}

.results-content a:hover {
    text-decoration: underline;
}

/* ========== RATING ========== */
.rating-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.8rem 2rem;
    margin-top: 1.5rem;
    text-align: center;
}

.rating-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 1.2rem;
    color: var(--text-muted);
}

.rating-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
}

.rating-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 50px;
    color: var(--text-muted);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.rating-btn:hover {
    border-color: var(--accent);
    color: var(--text);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(124, 92, 252, 0.15);
}

.rating-btn.selected {
    border-color: var(--accent);
    background: rgba(124, 92, 252, 0.15);
    color: var(--accent);
}

.rating-btn:disabled {
    cursor: default;
    opacity: 0.35;
    transform: none;
    box-shadow: none;
}

.rating-btn:disabled.selected {
    opacity: 1;
}

.rating-emoji {
    font-size: 1.2rem;
    line-height: 1;
}

.rating-thanks {
    margin-top: 1rem;
    color: var(--green);
    font-size: 0.82rem;
    font-weight: 500;
}

.rating-thanks.hidden {
    display: none;
}

/* ========== SIDE PANELS ========== */
.side-panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 400px;
    max-width: 90vw;
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    z-index: 1000;
    transition: right 0.3s ease;
    display: flex;
    flex-direction: column;
}

.side-panel.open {
    right: 0;
}

.side-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.side-panel-header h3 {
    font-size: 1rem;
    font-weight: 700;
}

.side-panel-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.side-panel-close:hover {
    color: var(--red);
    background: rgba(248, 113, 113, 0.1);
}

.side-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
}

.side-panel-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    padding: 2rem 0;
}

.panel-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

.panel-overlay.visible {
    display: block;
}

/* History item */
.history-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}

.history-item:hover {
    border-color: var(--accent);
}

.history-item-date {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.history-item-brief {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.3rem;
}

.history-item-tags {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}

.history-tag {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
    border-radius: 50px;
    background: rgba(124, 92, 252, 0.1);
    color: var(--accent);
    border: 1px solid rgba(124, 92, 252, 0.2);
}

/* Favorite item */
.fav-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    margin-bottom: 0.6rem;
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
}

.fav-item-text {
    flex: 1;
    font-size: 0.82rem;
    line-height: 1.5;
}

.fav-item-context {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

.fav-item-actions {
    display: flex;
    gap: 0.3rem;
    flex-shrink: 0;
}

.fav-item-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 28px;
    height: 28px;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fav-item-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.fav-item-btn.delete:hover {
    border-color: var(--red);
    color: var(--red);
}

/* ========== MODAL ========== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.modal-overlay.visible {
    display: flex;
}

.modal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--border);
}

.modal-header h3 {
    font-size: 1rem;
    font-weight: 700;
}

.modal-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border-radius: 6px;
    transition: all 0.2s;
}

.modal-close:hover {
    color: var(--red);
    background: rgba(248, 113, 113, 0.1);
}

.modal-body {
    padding: 1.5rem;
    line-height: 1.7;
    font-size: 0.9rem;
}

.modal-body .loader {
    width: 35px;
    height: 35px;
    margin-bottom: 1rem;
}

.modal-body p {
    margin-bottom: 0.8rem;
}

.modal-body strong {
    color: #fff;
}

/* ========== ERROR ========== */
.error-msg {
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
    color: var(--red);
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-top: 1rem;
    font-size: 0.85rem;
    display: none;
}

.error-msg.visible { display: block; }

/* ========== TOAST ========== */
.toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.8rem 1.5rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 500;
    z-index: 3000;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.toast.success {
    border-color: var(--green);
    color: var(--green);
}

/* ========== FORM EXTRAS ========== */
.form-hint {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    opacity: 0.7;
}

.input-list {
    margin-bottom: 0.5rem;
}

.input-list:last-of-type {
    margin-bottom: 0;
}

/* Upload area */
.upload-area {
    background: var(--surface-2);
    border: 2px dashed var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
}

.upload-area:hover {
    border-color: var(--accent);
}

.upload-area.dragover {
    border-color: var(--pink);
    background: rgba(244, 114, 182, 0.05);
}

.upload-placeholder {
    padding: 1.5rem;
    text-align: center;
}

.upload-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.upload-placeholder p {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}

.upload-placeholder p strong {
    color: var(--accent);
}

.upload-hint {
    font-size: 0.68rem;
    color: var(--text-muted);
    opacity: 0.6;
}

.upload-preview {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.upload-preview.hidden {
    display: none;
}

.upload-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: 8px;
    object-fit: contain;
}

.upload-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--red);
    border: none;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.upload-remove:hover {
    transform: scale(1.1);
}

.hidden-file-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

/* ========== IMAGE GENERATOR ========== */
.generate-btn-img {
    background: linear-gradient(135deg, #f472b6 0%, #9333ea 100%);
}

.generate-btn-img:hover {
    box-shadow: 0 8px 25px rgba(244, 114, 182, 0.3);
}

/* Ratio cards */
.ratio-cards {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.ratio-card {
    cursor: pointer;
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    text-align: center;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    font-family: 'Poppins', 'Inter', sans-serif;
    color: var(--text);
    min-width: 70px;
}

.ratio-card:hover {
    border-color: var(--accent);
}

.ratio-card.selected {
    border-color: var(--pink);
    background: rgba(244, 114, 182, 0.1);
    box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.2);
}

.ratio-card strong {
    font-size: 0.75rem;
}

.ratio-card p {
    font-size: 0.6rem;
    color: var(--text-muted);
    margin: 0;
}

.ratio-preview {
    display: block;
    background: var(--text-muted);
    border-radius: 3px;
    opacity: 0.4;
}

.r-1-1 { width: 24px; height: 24px; }
.r-4-3 { width: 28px; height: 21px; }
.r-3-4 { width: 21px; height: 28px; }
.r-16-9 { width: 32px; height: 18px; }
.r-9-16 { width: 18px; height: 32px; }

.ratio-card.selected .ratio-preview {
    background: var(--pink);
    opacity: 0.7;
}

/* Generated image */
.image-result-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    text-align: center;
}

.generated-image {
    max-width: 100%;
    max-height: 600px;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

/* ========== SAVE TO LIBRARY BUTTON ========== */
.save-lib-btn {
    color: var(--green) !important;
    border-color: var(--green) !important;
}
.save-lib-btn:hover {
    background: rgba(52, 211, 153, 0.1) !important;
}
.tab-btn-bib {
    color: var(--green) !important;
}

/* ========== MI BIBLIOTECA TAB ========== */
#tabBiblioteca {
    padding: 2rem 2.5rem;
}
.bib-header {
    text-align: center;
    padding: 1.5rem 0 0.5rem;
}
.bib-header h2 { font-size: 1.5rem; margin-bottom: 0.4rem; }
.bib-header p { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem; }

/* Biblioteca toolbar */
.bib-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1.5rem;
    margin-bottom: 1rem;
}

.bib-upload-btn {
    padding: 0.6rem 1.3rem;
    background: var(--accent);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.bib-upload-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}

.bib-count {
    font-size: 0.82rem;
    color: var(--text-muted);
}
/* Buy Credits Button */
.buy-credits-btn {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.6rem 1.5rem;
    background: linear-gradient(135deg, #7c5cfc, #6a4ff0);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.buy-credits-btn:hover {
    background: linear-gradient(135deg, #6a4ff0, #5a3fe0);
    transform: translateY(-1px);
}

/* Ideas sub-tabs (Ideas / Copy Out / Escaleta) */
.ideas-subtabs {
    display: flex;
    gap: 0;
    margin: 1.5rem 0 2rem 0;
    padding: 0 0.5rem;
    border-bottom: 2px solid var(--border);
}
.ideas-subtab {
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--text-muted);
    font-size: 1.1rem;
    font-weight: 600;
    padding: 1rem 2rem;
    cursor: pointer;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.ideas-subtab:hover { color: var(--text); }
.ideas-subtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.ideas-subpanel { display: none; }
.ideas-subpanel.active { display: block; }

/* Video mode tabs */
.video-mode-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border);
}
.video-mode-tab {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    font-weight: 500;
}
.video-mode-tab:hover { color: var(--text); }
.video-mode-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* Video mode info box */
.vid-mode-info {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(251, 146, 60, 0.08);
    border: 1px solid rgba(251, 146, 60, 0.25);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.vid-mode-info strong { color: var(--orange); }
.vid-mode-info-icon { font-size: 1.2rem; flex-shrink: 0; margin-top: 0.1rem; }

/* Video form spacing */
#tabVideo .form-group { margin-bottom: 0.5rem; }
#tabVideo .form-grid { gap: 1.5rem; margin-bottom: 0.75rem; }
#tabVideo .form-card { padding: 2rem; }

/* Video guided form - Image cards */
.vid-img-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
}
@media (max-width: 700px) { .vid-img-grid { grid-template-columns: 1fr; } }

.vid-img-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.vid-img-card:hover { border-color: rgba(124, 92, 252, 0.4); }

.vid-img-card-header {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.75rem;
    background: var(--surface-3);
    border-bottom: 1px solid var(--border);
}
.vid-img-card-icon { font-size: 1rem; }
.vid-img-card-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
}

.vid-img-upload {
    cursor: pointer;
    transition: all 0.2s;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin: 0.5rem;
    border: 2px dashed var(--border);
    border-radius: 8px;
    background: var(--bg);
}
.vid-img-upload:hover { border-color: var(--accent); background: rgba(124, 92, 252, 0.03); }

.vid-img-placeholder {
    text-align: center;
    padding: 0.75rem;
    color: var(--text-muted);
}
.vid-img-plus {
    display: block;
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--accent);
    line-height: 1;
    margin-bottom: 0.25rem;
}
.vid-img-plus-text { font-size: 0.68rem; }

.vid-img-preview {
    width: 100%;
    height: 100px;
    position: relative;
}
.vid-img-preview.hidden { display: none; }
.vid-img-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 6px;
}
.vid-img-remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.7);
    border: none;
    color: #fff;
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform 0.15s;
}
.vid-img-remove-btn:hover { transform: scale(1.15); background: var(--red); }

/* "Elegir de Mi Negocio" link under each card */
.brand-photos-link {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.4rem 0.5rem;
    background: none;
    border: none;
    border-top: 1px solid var(--border);
    color: var(--accent);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.brand-photos-link:hover {
    background: rgba(124, 92, 252, 0.06);
    color: var(--accent-hover);
}

/* Brand photos picker grid inside modal */
.bp-brand-section {
    margin-bottom: 1.2rem;
}
.bp-brand-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.bp-brand-name span {
    color: var(--text-muted);
    font-weight: 400;
    font-size: 0.72rem;
}
.bp-photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.5rem;
}
.bp-photo-thumb {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--border);
    transition: all 0.15s;
    position: relative;
}
.bp-photo-thumb:hover {
    border-color: var(--accent);
    transform: scale(1.04);
    box-shadow: 0 0 0 2px rgba(124, 92, 252, 0.25);
}
.bp-photo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bp-photo-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2px 4px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 0.58rem;
    text-align: center;
    font-weight: 600;
}
.bp-empty {
    color: var(--text-muted);
    font-size: 0.82rem;
    text-align: center;
    padding: 2rem 1rem;
}

/* Toggle buttons (Replicar / Referencia) */
.vid-img-toggle {
    display: flex;
    padding: 0.45rem 0.5rem;
    gap: 0;
    border-top: 1px solid var(--border);
}
.vid-img-toggle-btn {
    flex: 1;
    padding: 0.35rem 0;
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.vid-img-toggle-btn:first-of-type {
    border-radius: 6px 0 0 6px;
    border-right: none;
}
.vid-img-toggle-btn:nth-of-type(2) {
    border-radius: 0 6px 6px 0;
}
.vid-img-toggle-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* Video loading */
.video-loading-content {
    text-align: center;
    padding: 2rem 0;
}
.video-loading-content h3 {
    color: var(--text);
    margin: 1rem 0 0.5rem;
}
.video-progress-info {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 1rem 0 0.75rem;
}
.video-progress-bar-wrap {
    width: 100%;
    max-width: 400px;
    height: 6px;
    background: var(--surface-2);
    border-radius: 3px;
    margin: 0 auto;
    overflow: hidden;
}
.video-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), #a855f7);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Video result */
.video-result-container {
    margin: 1rem 0;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    display: flex;
    justify-content: center;
}
.video-result-player {
    width: 100%;
    max-height: 500px;
    border-radius: 12px;
}
.video-result-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.video-result-actions .generate-btn {
    flex: 1;
    min-width: 180px;
}
.video-result-actions .ab-back-btn {
    flex: 1;
    min-width: 180px;
}

/* ============================================
   MI NEGOCIO MODULE
   ============================================ */
/* Brain selector (load from Mi Negocio) */
.neg-brain-selector {
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.06), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(124, 92, 252, 0.2);
    border-radius: 18px;
    padding: 1.75rem 2rem 1.25rem;
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
}
.neg-brain-selector::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), #a855f7, var(--accent));
}
.neg-brain-top { margin-bottom: 1.25rem; }
.neg-brain-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.neg-brain-icon { font-size: 1.4rem; }
.neg-brain-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.neg-brain-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 650px;
}
.neg-brain-selects {
    display: flex;
    gap: 1rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.neg-brain-select-group {
    flex: 1;
    min-width: 180px;
}
.neg-brain-select-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
    margin-bottom: 0.4rem;
}
.neg-brain-select-wrap {
    position: relative;
}
.neg-brain-select {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 1rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%237C5CFC' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}
.neg-brain-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.15);
}
.neg-brain-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.neg-brain-select option {
    background: var(--surface);
    color: var(--text);
    padding: 0.5rem;
}
.neg-brain-apply-btn {
    background: linear-gradient(135deg, var(--accent), #a855f7);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
    box-shadow: 0 2px 8px rgba(124, 92, 252, 0.25);
    margin-bottom: 1px;
}
.neg-brain-apply-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124, 92, 252, 0.35); }
.neg-brain-apply-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; box-shadow: none; }
.neg-brain-hint {
    margin-top: 0.85rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.neg-brain-hint a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.neg-brain-hint a:hover { text-decoration: underline; }

@media (max-width: 600px) {
    .neg-brain-selector { padding: 1.25rem 1.25rem 1rem; }
    .neg-brain-selects { flex-direction: column; align-items: stretch; }
    .neg-brain-select-group { min-width: 100%; }
    .neg-brain-apply-btn { width: 100%; text-align: center; }
}

#tabNegocio { padding: 2rem; }
#tabNegocio .hidden { display: none !important; }
.negocio-header { margin-bottom: 2rem; }
.negocio-header h2 { color: var(--text); font-size: 1.6rem; margin-bottom: 0.4rem; }

/* Negocio sub-tabs */
.negocio-subtabs {
    display: flex;
    gap: 0;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--border);
}
.negocio-subtab {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.05rem;
    padding: 0.85rem 1.8rem;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    font-weight: 500;
    font-family: inherit;
}
.negocio-subtab:hover { color: var(--text); }
.negocio-subtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.negocio-subpanel { display: none; }
.negocio-subpanel.active { display: block; }

/* =============================================
   Mi Negocio: layout con sidebar vertical
   ============================================= */
.negocio-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
    align-items: start;
}
.negocio-subtabs.negocio-subtabs-v {
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0;
    border-bottom: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.55rem;
    position: sticky;
    top: 72px;
    align-self: start;
}
.negocio-subtabs.negocio-subtabs-v .negocio-subtab {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    border-bottom: none;
    text-align: left;
    width: 100%;
    line-height: 1.25;
    color: var(--text-muted);
    transition: all 0.15s;
}
.negocio-subtabs.negocio-subtabs-v .negocio-subtab i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}
.negocio-subtabs.negocio-subtabs-v .negocio-subtab svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
}
.negocio-subtabs.negocio-subtabs-v .negocio-subtab:hover {
    background: var(--surface-2);
    color: var(--text);
}
.negocio-subtabs.negocio-subtabs-v .negocio-subtab.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-bottom: none;
    font-weight: 600;
}
.negocio-subtabs.negocio-subtabs-v .negocio-subtab.active svg {
    stroke-width: 2;
}
.negocio-content {
    min-width: 0; /* permite que el contenido se contraiga */
}
@media (max-width: 900px) {
    .negocio-layout {
        grid-template-columns: 1fr;
    }
    .negocio-subtabs.negocio-subtabs-v {
        flex-direction: row;
        overflow-x: auto;
        position: static;
        padding: 0.35rem;
    }
    .negocio-subtabs.negocio-subtabs-v .negocio-subtab {
        flex-shrink: 0;
        white-space: nowrap;
    }
}

/* Brands header */
.neg-brands-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0 0.25rem;
    gap: 0.8rem;
}
.neg-brands-count { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; flex-shrink: 0; }
.neg-add-brand-btn.neg-add-brand-sm { padding: 0.45rem 1rem !important; font-size: 0.8rem !important; }
.neg-tutorial-btn {
    padding: 0.45rem 1.1rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #fff;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.neg-tutorial-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.55);
}

/* Brand card */
.neg-brands-list { display: flex; flex-direction: column; gap: 0.9rem; }
/* Keep legacy grid only if old .neg-brand-card without .-h exists (backward compat) */
.neg-brands-list:not(:has(.neg-brand-card-h)) { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.neg-brand-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
    transition: border-color 0.2s;
    display: flex;
    flex-direction: column;
}
.neg-brand-card:hover { border-color: var(--accent); }
.neg-brand-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.85rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
}
.neg-brand-info { display: flex; align-items: center; gap: 1rem; }
.neg-brand-logo {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    background: var(--surface-2);
}
.neg-brand-name { font-size: 1.2rem; font-weight: 700; color: var(--text); }
.neg-brand-actions { display: flex; gap: 0.5rem; }

/* Mini buttons */
.neg-mini-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0.7rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}
.neg-mini-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.neg-mini-btn-danger:hover { background: #ef4444; border-color: #ef4444; }

/* Brand details */
.neg-brand-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.neg-detail-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.neg-detail-label { font-weight: 600; color: var(--text); min-width: 100px; flex-shrink: 0; }
.neg-colors-wrap { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.neg-color-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: inline-block;
}

/* Products inside brand card */
.neg-brand-products {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
    margin-top: 0.25rem;
}
.neg-products-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.75rem;
}
.neg-add-product-btn { font-size: 0.8rem !important; padding: 0.35rem 0.75rem !important; }
.neg-product-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.5rem;
    border-radius: 8px;
    font-size: 0.9rem;
    transition: background 0.15s;
}
.neg-product-row:hover { background: var(--surface-2); }
.neg-product-row + .neg-product-row { border-top: 1px solid var(--border); }
.neg-product-type {
    background: var(--accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    white-space: nowrap;
}
.neg-product-name { flex: 1; color: var(--text); }
.neg-product-actions { display: flex; gap: 0.4rem; }
.neg-no-products { color: var(--text-muted); font-size: 0.85rem; font-style: italic; padding: 0.5rem; }

/* Brand card thumbs */
.neg-thumbs-wrap { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.neg-brand-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
}

/* Empty state */
.neg-empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-muted);
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: 16px;
    grid-column: 1 / -1;
}
.neg-empty-state.hidden { display: none; }
.neg-empty-icon { font-size: 3.5rem; display: block; margin-bottom: 0.75rem; }

/* Brand form 2-column layout */
#negBrandForm {
    padding: 2rem 2.5rem;
    margin-top: 1.5rem;
    max-width: 900px;
}
#negBrandForm .form-section-title { margin-bottom: 1.5rem; font-size: 1.2rem; }
.neg-brand-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
    .neg-brand-form-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}
.neg-brand-col { display: flex; flex-direction: column; gap: 1.5rem; }
.neg-brand-name-input { font-size: 1.15rem; padding: 1rem 1.2rem; }

/* Logo upload */
.neg-logo-upload {
    width: 140px;
    height: 140px;
    border: 2px dashed var(--border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: border-color 0.2s;
    background: var(--surface-2);
}
.neg-logo-upload:hover { border-color: var(--accent); }
.neg-logo-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.neg-logo-placeholder span:first-child { font-size: 2rem; }
.neg-logo-preview {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 14px;
    padding: 6px;
}
.neg-logo-upload .upload-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    font-size: 14px;
    line-height: 24px;
    padding: 0;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 2;
}

/* Color swatches grid */
.neg-colors-grid {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}
.neg-color-swatch {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 2px solid var(--border);
    cursor: pointer;
    position: relative;
    transition: transform 0.15s;
}
.neg-color-swatch:hover { transform: scale(1.1); }
.neg-color-swatch .neg-swatch-remove {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    background: #ef4444;
    color: #fff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: none;
}
.neg-color-swatch:hover .neg-swatch-remove { display: block; }

/* Thumbnail grid (personajes & fotos) */
.neg-thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.neg-thumb-item {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    border: 2px solid var(--border);
    overflow: hidden;
    position: relative;
    cursor: pointer;
    background: var(--surface-2);
}
.neg-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.neg-thumb-item .neg-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    font-size: 13px;
    line-height: 22px;
    text-align: center;
    background: rgba(239, 68, 68, 0.9);
    color: #fff;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: none;
}
.neg-thumb-item:hover .neg-thumb-remove { display: block; }

/* Add button for grids */
.neg-add-thumb-btn {
    background: none;
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
    display: inline-block;
}
.neg-add-thumb-btn:hover { border-color: var(--accent); color: var(--accent); }

/* Brand form actions */
.neg-form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* Product modal */
.neg-product-modal-card {
    max-width: 600px;
    width: 90%;
}

/* MIS PRODUCTOS - grid view */
.neg-products-header { margin-bottom: 1.5rem; }
.neg-filter-group { display: flex; align-items: center; gap: 0.75rem; }
.neg-filter-group .form-label { margin-bottom: 0; white-space: nowrap; }
.neg-filter-group .form-select { max-width: 280px; }

.neg-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.25rem; }
.neg-product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    transition: border-color 0.2s;
}
.neg-product-card:hover { border-color: var(--accent); }
.neg-pc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.neg-pc-brand { font-size: 0.8rem; color: var(--text-muted); }
.neg-pc-name { font-size: 1.05rem; font-weight: 600; color: var(--text); margin-bottom: 0.85rem; }
.neg-pc-section { margin-bottom: 0.6rem; }
.neg-pc-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 0.3rem; }
.neg-pc-section ul { list-style: none; padding: 0; }
.neg-pc-section li { font-size: 0.85rem; color: var(--text-muted); padding: 0.15rem 0; padding-left: 0.9rem; position: relative; }
.neg-pc-section li::before { content: ''; position: absolute; left: 0; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.neg-pc-section p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; }

/* ESTRATEGIA */
#nsubEstrategia .form-container {
    max-width: 1100px;
}
.neg-est-result-wrap {
    padding: 1.5rem 2rem;
}
.neg-est-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.neg-est-result-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}
.neg-est-save-btn {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border: none;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.neg-est-save-btn:hover { opacity: 0.85; }
.neg-est-save-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.neg-est-delete-btn {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border: none;
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.neg-est-delete-btn:hover { opacity: 0.85; }

/* Saved strategies list */
.neg-est-saved-header {
    margin-bottom: 1.5rem;
}
.neg-est-saved-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.neg-est-saved-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
    cursor: pointer;
    transition: all 0.2s;
}
.neg-est-saved-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.2);
}
.neg-est-saved-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.4rem;
}
.neg-est-saved-card-meta {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}
.neg-est-saved-card-levels {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.neg-est-saved-card-stat {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}
/* ---- Funnel level checkboxes ---- */
.neg-est-niveles-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.neg-est-nivel-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.88rem;
    color: var(--text);
    cursor: pointer;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    transition: all 0.2s;
}
.neg-est-nivel-check:has(input:checked) {
    border-color: var(--accent);
    background: rgba(139, 92, 246, 0.08);
}
.neg-est-nivel-check input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
}

/* ---- Nivel tags (TOFU/MOFU/BOFU) ---- */
.neg-est-nivel-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.2rem 0.6rem;
    border-radius: 5px;
    white-space: nowrap;
}
.neg-est-nivel-tag.tofu {
    background: #3b82f6;
    color: #fff;
}
.neg-est-nivel-tag.mofu {
    background: #f59e0b;
    color: #fff;
}
.neg-est-nivel-tag.bofu {
    background: #22c55e;
    color: #fff;
}

/* ---- Funnel preview bar ---- */
.neg-est-funnel-preview {
    margin: 1.25rem 0 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--surface-2);
    border-radius: 12px;
    border: 1px solid var(--border);
}
.neg-est-funnel-bar {
    display: flex;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    gap: 2px;
}
.neg-est-funnel-seg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    transition: flex 0.3s ease;
    min-width: 50px;
}
.neg-est-funnel-seg span { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; }
.neg-est-funnel-seg small { font-size: 0.85rem; font-weight: 800; }
.neg-est-funnel-seg.tofu { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.neg-est-funnel-seg.mofu { background: linear-gradient(135deg, #f59e0b, #d97706); }
.neg-est-funnel-seg.bofu { background: linear-gradient(135deg, #22c55e, #16a34a); }
.neg-est-funnel-desc {
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 0.6rem;
}

/* ---- Strategy result ---- */
.neg-est-campaign {
    background: var(--surface-2);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.75rem;
}
.neg-est-camp-row { font-size: 0.95rem; color: var(--text); margin-bottom: 0.4rem; }
.neg-est-camp-row strong { color: var(--accent); }

.neg-est-adset {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.neg-est-adset-tofu { border-left: 4px solid #3b82f6; }
.neg-est-adset-mofu { border-left: 4px solid #f59e0b; }
.neg-est-adset-bofu { border-left: 4px solid #22c55e; }

.neg-est-adset-header {
    background: var(--surface-2);
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.neg-est-adset-title-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.neg-est-adset-title-row h4 { font-size: 1rem; color: var(--text); }
.neg-est-adset-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }

.neg-est-ads-table-wrap { overflow-x: auto; padding: 0.25rem; }
.neg-est-ads-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.neg-est-ads-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--surface-2);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.neg-est-ads-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: top;
}
.neg-est-ads-table tr:last-child td { border-bottom: none; }
.neg-est-hook-cell {
    font-style: italic;
    color: var(--accent);
    max-width: 260px;
    line-height: 1.45;
    font-size: 0.84rem;
}
.neg-est-obj-cell {
    max-width: 200px;
    line-height: 1.4;
    font-size: 0.84rem;
}
.neg-est-format-badge {
    background: var(--accent);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 5px;
    white-space: nowrap;
}

/* Format badge clickable */
.neg-est-format-clickable {
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.neg-est-format-clickable:hover {
    filter: brightness(1.2);
    transform: scale(1.05);
}

/* Format dropdown */
.neg-est-format-dropdown {
    position: fixed;
    z-index: 9999;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.5rem 0;
    min-width: 260px;
    max-height: 280px;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    animation: fadeDropIn 0.15s ease;
}
@keyframes fadeDropIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.neg-est-format-option {
    padding: 0.55rem 1rem;
    font-size: 0.82rem;
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
}
.neg-est-format-option:hover {
    background: rgba(139, 92, 246, 0.15);
    color: var(--accent);
}
.neg-est-format-option.active {
    background: rgba(139, 92, 246, 0.1);
    color: var(--accent);
    font-weight: 600;
}
.neg-est-format-option.active::before {
    content: '✓ ';
}

.neg-est-go-ideas-btn {
    background: linear-gradient(135deg, var(--accent), #a855f7);
    border: none;
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.2s;
}
.neg-est-go-ideas-btn:hover { opacity: 0.85; }

/* Responsive */
@media (max-width: 768px) {
    #tabNegocio { padding: 1rem; }
    .negocio-subtabs { overflow-x: auto; }
    .negocio-subtab { font-size: 0.9rem; padding: 0.7rem 1.2rem; white-space: nowrap; }
    .neg-brand-card { padding: 1.25rem; }
    .neg-brand-details { grid-template-columns: 1fr; }
    #negBrandForm { padding: 1.5rem; }
    .neg-products-grid { grid-template-columns: 1fr; }
    .neg-est-ads-table { font-size: 0.72rem; }
    .neg-est-hook-cell { max-width: 160px; }
    .neg-est-obj-cell { max-width: 140px; }
    .neg-est-niveles-checks { flex-direction: column; }
    .neg-est-funnel-seg { min-width: 40px; }
    .neg-filter-group { flex-direction: column; align-items: stretch; }
    .neg-filter-group .form-select { max-width: 100%; }
}

/* Biblioteca sub-tabs (Guardados / Favoritos) */
.bib-subtabs {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border);
}
.bib-subtab {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 0.6rem 1.4rem;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.bib-subtab:hover { color: var(--text); }
.bib-subtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.bib-subpanel { display: none; }
.bib-subpanel.active { display: block; }

/* Favoritos inside biblioteca */
.bib-fav-list { display: flex; flex-direction: column; gap: 0.6rem; }
.bib-fav-item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    transition: border-color 0.2s;
}
.bib-fav-item:hover { border-color: var(--accent); }
.bib-fav-item-text { flex: 1; font-size: 0.9rem; line-height: 1.5; }
.bib-fav-item-context { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.3rem; }
.bib-fav-item-actions { display: flex; gap: 0.4rem; flex-shrink: 0; }
.bib-fav-item-btn {
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 32px; height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.bib-fav-item-btn:hover { border-color: var(--accent); color: var(--text); }
.bib-fav-item-btn.delete:hover { border-color: var(--red); color: var(--red); }

.bib-filters {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.bib-filter {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.bib-filter:hover { border-color: var(--accent); color: var(--text); }
.bib-filter.active { background: var(--accent); border-color: var(--accent); color: #fff; }

.bib-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    padding: 1.25rem 0;
}
@media (max-width: 900px) { .bib-items { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bib-items { grid-template-columns: 1fr; } }

/* Kanban Board */
.bib-kanban {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    min-height: 400px;
    align-items: start;
}
@media (max-width: 1100px) { .bib-kanban { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bib-kanban { grid-template-columns: 1fr; } }

.bib-kanban-col {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    min-height: 300px;
    max-height: 80vh;
}
.bib-kanban-col-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 1;
    background: inherit;
    border-radius: 12px 12px 0 0;
}
.bib-kanban-col-icon { font-size: 1.1rem; }
.bib-kanban-col-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    flex: 1;
}
.bib-kanban-col-count {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--accent);
    color: #fff;
    border-radius: 10px;
    padding: 0.15rem 0.5rem;
    min-width: 20px;
    text-align: center;
}
.bib-kanban-col[data-col="ideas"] .bib-kanban-col-count { background: var(--accent); }
.bib-kanban-col[data-col="imagenes"] .bib-kanban-col-count { background: var(--pink); }
.bib-kanban-col[data-col="escaletas"] .bib-kanban-col-count { background: var(--orange); }
.bib-kanban-col[data-col="copyout"] .bib-kanban-col-count { background: var(--blue); }

.bib-kanban-col-items {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

/* Kanban Cards */
.bib-kb-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.7rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: default;
}
.bib-kb-card:hover {
    border-color: var(--accent);
    box-shadow: 0 2px 8px rgba(124, 92, 252, 0.12);
}
.bib-kb-card-date {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}
.bib-kb-card-preview {
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.45;
    max-height: 80px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

/* Idea card especializada (con marca y hook) */
.bib-kb-idea-card .bib-kb-card-date {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}
.bib-kb-marca-badge {
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.18), rgba(96, 165, 250, 0.12));
    color: var(--accent);
    font-size: 0.66rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bib-kb-idea-hook {
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.45;
    font-weight: 500;
    padding: 0.4rem 0.5rem;
    background: rgba(124, 92, 252, 0.06);
    border-left: 2px solid var(--accent);
    border-radius: 4px;
    margin-bottom: 0.45rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bib-kb-idea-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
}
.bib-kb-mini-tag {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-muted);
    background: rgba(255,255,255,0.05);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.bib-kb-card-img {
    width: 100%;
    border-radius: 6px;
    max-height: 120px;
    object-fit: cover;
    cursor: pointer;
    margin-bottom: 0.3rem;
}
.bib-kb-card-source {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    font-style: italic;
}
.bib-kb-card-actions {
    display: flex;
    gap: 0.3rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.bib-kb-btn {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.bib-kb-btn:hover { color: var(--text); border-color: var(--accent); }
.bib-kb-btn.delete:hover { color: var(--red); border-color: var(--red); }

.bib-kanban-empty {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
    padding: 2rem 0.5rem;
    opacity: 0.6;
}
.bib-kanban-empty-rich {
    opacity: 1;
    padding: 2.5rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}
.bib-empty-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}
.bib-empty-icon svg { width: 22px; height: 22px; }
.bib-empty-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.25rem;
}
.bib-empty-cta {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.5rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.15s;
    box-shadow: var(--shadow-accent);
}
.bib-empty-cta:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
}
.bib-empty-cta svg { width: 14px; height: 14px; }

.bib-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 1rem;
    font-size: 0.95rem;
    grid-column: 1 / -1;
}
.bib-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
}
.bib-card:hover {
    border-color: rgba(124, 92, 252, 0.4);
    box-shadow: 0 4px 20px rgba(124, 92, 252, 0.08);
}
.bib-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.bib-card-type {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: var(--surface-3);
}
.bib-card-type.t-ideas { color: var(--accent); background: rgba(124, 92, 252, 0.12); }
.bib-card-type.t-copyout { color: var(--blue); background: rgba(59, 130, 246, 0.12); }
.bib-card-type.t-imagenes { color: var(--pink); background: rgba(236, 72, 153, 0.12); }
.bib-card-type.t-escaletas { color: var(--orange); background: rgba(249, 115, 22, 0.12); }
.bib-card-type.t-mensajes { color: var(--green); background: rgba(16, 185, 129, 0.12); }
.bib-card-date { font-size: 0.65rem; color: var(--text-muted); }
.bib-card-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.4rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bib-card-body {
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--text-muted);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-wrap;
    margin-bottom: 0.6rem;
}
.bib-card-body img {
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.bib-card-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.bib-card-btn {
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    text-align: center;
}
.bib-card-btn:hover { color: var(--text); border-color: var(--accent); background: rgba(124, 92, 252, 0.1); }
.bib-card-btn.delete:hover { color: var(--red); border-color: var(--red); background: rgba(239, 68, 68, 0.1); }
.bib-card-btn.txt-btn:hover { color: var(--blue); border-color: var(--blue); background: rgba(59, 130, 246, 0.1); }
.bib-card-btn.create-ad-btn { color: var(--green); border-color: rgba(52, 211, 153, 0.3); }
.bib-card-btn.create-ad-btn:hover { color: #fff; border-color: var(--green); background: rgba(52, 211, 153, 0.15); }
.bib-card-btn.edit-text-btn { color: var(--orange); border-color: rgba(251, 146, 60, 0.3); }
.bib-card-btn.edit-text-btn:hover { color: #fff; border-color: var(--orange); background: rgba(251, 146, 60, 0.15); }
/* Image card extra actions row */
.bib-card-actions-extra {
    display: flex;
    gap: 0.4rem;
    padding-top: 0.4rem;
}

/* ========== MÉTRICAS DASHBOARD ========== */
#tabMetricas { padding: 2rem 2.5rem; }
.metricas-header { margin-bottom: 2rem; }
.metricas-header h2 { font-size: 1.4rem; margin-bottom: 0.4rem; }

.metricas-controls {
    display: flex;
    gap: 1.5rem;
    align-items: flex-end;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.metricas-control-group { flex: 1; min-width: 200px; }
.metricas-control-group .form-select { max-width: 400px; }

.metricas-period-btns {
    display: flex;
    gap: 0.3rem;
}
.metricas-period-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.metricas-period-btn:hover { border-color: var(--accent); color: var(--text); }
.metricas-period-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* KPI Cards */
.metricas-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
.metricas-kpis.metricas-kpis-5 {
    grid-template-columns: repeat(5, 1fr);
}
.metricas-kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
    text-align: center;
    transition: border-color 0.2s;
}
.metricas-kpi-card:hover { border-color: var(--accent); }
.metricas-kpi-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.metricas-kpi-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    margin-bottom: 0.3rem;
}
.metricas-kpi-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Table sections */
.metricas-section {
    margin-bottom: 2.5rem;
}
.metricas-section-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text);
}
.metricas-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
}
.metricas-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.metricas-table thead th {
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.metricas-table tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.metricas-table tbody tr:last-child td { border-bottom: none; }
.metricas-table tbody tr:hover { background: rgba(124, 92, 252, 0.04); }
.metricas-table .camp-name {
    font-weight: 600;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.metricas-table .num-cell { text-align: center; font-variant-numeric: tabular-nums; }
.metricas-table thead th:not(:first-child) { text-align: center; }
.metricas-obj-row { margin-bottom: 1.5rem; }
.metricas-obj-title { font-size: 1rem; font-weight: 700; color: var(--text); margin-bottom: 0.75rem; }
.metricas-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem 1rem;
    font-size: 0.85rem;
}

.metricas-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem;
    color: var(--text-muted);
}
.metricas-loading.hidden { display: none; }

@media (max-width: 1100px) {
    .metricas-kpis.metricas-kpis-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
    .metricas-kpis { grid-template-columns: 1fr; }
    .metricas-kpis.metricas-kpis-5 { grid-template-columns: 1fr; }
    .metricas-controls { flex-direction: column; }
}

/* ========== REGENERAR MENSAJE BTN ========== */
.mensaje-regen-btn,
.mensaje-copy-single {
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 0.5rem;
}
.mensaje-regen-btn:hover,
.mensaje-copy-single:hover { color: var(--accent); border-color: var(--accent); }
.mensaje-copy-single {
    background: rgba(37, 211, 102, 0.1);
    border-color: rgba(37, 211, 102, 0.3);
    color: #25d366;
}
.mensaje-copy-single:hover {
    background: rgba(37, 211, 102, 0.2);
    border-color: #25d366;
    color: #25d366;
}
.mensaje-regen-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ========== TEXT EDITOR OVERLAY ========== */
.text-editor-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    backdrop-filter: blur(8px);
}
.text-editor-overlay.hidden { display: none; }

.text-editor-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    max-width: 1100px;
    width: 100%;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.text-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.text-editor-header h2 { font-size: 1.1rem; font-weight: 700; }
.text-editor-close {
    background: none; border: none; color: var(--text-muted);
    font-size: 1.8rem; cursor: pointer; line-height: 1;
    transition: color 0.2s;
}
.text-editor-close:hover { color: var(--red); }

.text-editor-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
}

/* Toolbar */
.text-editor-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.8rem;
    background: var(--surface-2);
    border-radius: 10px;
    border: 1px solid var(--border);
}
.te-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: flex-end;
}
.te-tool-btn.te-shape {
    background: var(--surface-3);
    font-size: 0.78rem;
}
.te-tool-btn.te-shape:hover { border-color: var(--green); color: var(--green); }
.te-tool-btn.te-logo { color: var(--orange); }
.te-tool-btn.te-logo:hover { border-color: var(--orange); background: rgba(251, 146, 60, 0.1); }
.te-tool-btn.te-upload-font {
    font-size: 0.72rem;
    padding: 0.4rem 0.6rem;
}
.te-range {
    width: 70px;
    accent-color: var(--accent);
    cursor: pointer;
}
.te-tool-group {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.te-label {
    font-size: 0.65rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}
.te-select {
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
    min-width: 130px;
}
.te-select-sm { min-width: 80px; }
.te-input-num {
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.4rem 0.5rem;
    border-radius: 6px;
    font-size: 0.8rem;
    width: 65px;
    text-align: center;
}
.te-color {
    width: 32px; height: 32px;
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    background: var(--surface-3);
    padding: 2px;
}
.te-bg-controls {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.te-checkbox-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
}
.te-separator {
    width: 1px;
    height: 36px;
    background: var(--border);
    align-self: center;
}
.te-tool-btn {
    background: var(--surface-3);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.te-tool-btn:hover { background: var(--surface-2); border-color: var(--accent); }
.te-tool-btn.te-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.te-tool-btn.te-primary:hover { background: var(--accent-hover); }
.te-tool-btn.te-danger { color: var(--red); }
.te-tool-btn.te-danger:hover { background: rgba(248, 113, 113, 0.1); border-color: var(--red); }

/* Canvas */
.text-editor-canvas-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #111;
    border-radius: 10px;
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
    flex: 1;
    min-height: 300px;
    max-height: 500px;
}
.text-editor-canvas-wrap canvas {
    max-width: 100%;
}

/* Footer */
.text-editor-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    gap: 1rem;
}
.te-download {
    font-size: 0.9rem !important;
    padding: 0.7rem 1.5rem !important;
}
.te-save-lib {
    background: rgba(16, 185, 129, 0.12) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
    color: #6ee7b7 !important;
    font-size: 0.9rem !important;
    padding: 0.7rem 1.5rem !important;
}
.te-save-lib:hover {
    background: rgba(16, 185, 129, 0.25) !important;
    border-color: #10b981 !important;
    color: white !important;
}

/* Responsive */
@media (max-width: 768px) {
    .text-editor-toolbar { gap: 0.4rem; }
    .te-select { min-width: 100px; font-size: 0.75rem; }
    .te-separator { display: none; }
    .text-editor-modal { max-height: 98vh; }
    .text-editor-body { padding: 0.8rem; }
}

/* ========== PROFILE SAVE ========== */
.profile-actions {
    display: flex;
    gap: 0.8rem;
    align-items: stretch;
}

.profile-actions .generate-btn {
    flex: 1;
    margin-top: 0;
}

.save-profile-btn {
    padding: 0.8rem 1.2rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-muted);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.save-profile-btn:hover {
    border-color: var(--green);
    color: var(--green);
    background: rgba(52, 211, 153, 0.08);
}

.save-profile-btn.saved {
    border-color: var(--green);
    color: var(--green);
}

/* ========== BUSINESS DOCUMENT ========== */
.biz-doc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0.8rem 1rem;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 10px;
    transition: all 0.2s;
}

.biz-doc-header:hover {
    border-color: var(--accent);
    background: rgba(124, 92, 252, 0.05);
}

.biz-doc-header:hover .form-label {
    color: var(--accent);
}

.biz-doc-toggle-hint {
    font-size: 0.72rem;
    color: var(--accent);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}

.biz-doc-arrow {
    font-size: 0.85rem;
    color: var(--accent);
    transition: transform 0.2s;
}

.biz-doc-arrow.open {
    transform: rotate(180deg);
}

.biz-doc-content.hidden {
    display: none;
}

.biz-doc-upload-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}

.biz-doc-upload-btn {
    padding: 0.5rem 1rem;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.biz-doc-upload-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.biz-doc-textarea {
    min-height: 250px;
    font-size: 0.82rem;
    line-height: 1.6;
}

.biz-doc-counter {
    text-align: right;
    display: block;
}

/* ========== FLOW BUTTONS ========== */
.flow-btn {
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}

.flow-btn:hover {
    background: rgba(96, 165, 250, 0.1) !important;
}

.flow-tip {
    background: rgba(96, 165, 250, 0.08);
    border: 1px solid rgba(96, 165, 250, 0.2);
    border-radius: 12px;
    padding: 1.1rem 1.5rem;
    margin-top: 1.2rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.6;
}

.flow-tip strong {
    color: var(--blue);
}

/* ========== WELCOME MODAL ========== */
.welcome-modal-card {
    max-width: 520px;
}

.welcome-body {
    padding: 1.5rem 2rem 2rem;
}

.welcome-steps {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-bottom: 1.5rem;
}

.welcome-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.welcome-step-num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, var(--accent) 0%, #9333ea 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.85rem;
    color: #fff;
}

.welcome-step strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.2rem;
    color: var(--text);
}

.welcome-step p {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

.welcome-start-btn {
    margin-top: 0;
}

/* ========== ESCALETA ========== */
.escaleta-textarea {
    min-height: 200px;
}

.generate-btn-escaleta {
    background: linear-gradient(135deg, #60a5fa 0%, #7c5cfc 100%);
}

.generate-btn-escaleta:hover {
    box-shadow: 0 8px 25px rgba(96, 165, 250, 0.3);
}

.escaleta-action-btn {
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}

.escaleta-action-btn:hover {
    background: rgba(96, 165, 250, 0.1) !important;
}

.escaleta-table-wrapper {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid var(--border);
}

.escaleta-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    min-width: 700px;
}

.escaleta-table thead {
    background: var(--surface-3);
}

.escaleta-table th {
    padding: 0.9rem 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
    border-bottom: 2px solid var(--border);
    white-space: nowrap;
}

.escaleta-table td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    line-height: 1.5;
    color: var(--text);
}

.escaleta-table tbody tr {
    background: var(--surface);
    transition: background 0.15s;
}

.escaleta-table tbody tr:nth-child(even) {
    background: var(--surface-2);
}

.escaleta-table tbody tr:hover {
    background: rgba(124, 92, 252, 0.05);
}

.escaleta-cell-num {
    text-align: center;
    font-weight: 800;
    color: var(--accent);
    font-size: 1rem;
    width: 40px;
}

.escaleta-col-num {
    width: 40px;
    text-align: center;
}

.escaleta-col-clip {
    width: 17%;
}

.escaleta-col-linea {
    width: 23%;
}

.escaleta-col-person {
    width: 30%;
}

.escaleta-col-grab {
    width: 25%;
}

.escaleta-cell-clip {
    font-weight: 600;
    color: var(--pink);
}

.escaleta-cell-linea {
    font-style: italic;
    color: var(--text-muted);
}

.escaleta-cell-person {
    color: var(--blue);
    font-size: 0.82rem;
    line-height: 1.55;
}

.escaleta-cell-grab {
    color: var(--green);
}

/* Escaleta edit mode */
.escaleta-cell-editing {
    outline: 1px dashed rgba(124, 92, 252, 0.4);
    outline-offset: -2px;
    border-radius: 4px;
    background: rgba(124, 92, 252, 0.04) !important;
    cursor: text;
}

.escaleta-cell-editing:focus {
    outline: 2px solid var(--accent);
    background: rgba(124, 92, 252, 0.08) !important;
}

/* Pre-filled data banner */
.prefill-banner {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    background: rgba(124, 92, 252, 0.08);
    border: 1px solid rgba(124, 92, 252, 0.25);
    border-radius: 12px;
    padding: 1rem 1.3rem;
    margin-bottom: 1.2rem;
}

.prefill-banner-icon {
    font-size: 1.4rem;
}

.prefill-banner-text strong {
    color: var(--accent);
    font-size: 0.88rem;
}

.prefill-banner-text p {
    color: var(--text-muted);
    font-size: 0.8rem;
    margin-top: 0.15rem;
}

/* Copy Out version cards */
.co-version-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem 1.8rem;
    margin: 1.2rem 0;
    position: relative;
}

.co-version-card h3 {
    margin-top: 0 !important;
    margin-bottom: 1rem;
}

.co-version-body {
    outline: none;
    border-radius: 8px;
    padding: 0.3rem;
    transition: all 0.2s;
}

.co-version-body.co-editing,
.co-version-card.co-editing {
    background: rgba(124, 92, 252, 0.04);
    outline: 2px dashed rgba(124, 92, 252, 0.35);
    padding: 0.8rem;
}

.co-version-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--border);
}

.co-edit-btn {
    padding: 0.45rem 1rem;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: 8px;
    color: var(--blue);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.co-edit-btn:hover {
    background: rgba(96, 165, 250, 0.2);
    transform: translateY(-1px);
}

.co-edit-btn.co-edit-active {
    background: var(--blue);
    color: #fff;
    border-color: var(--blue);
}

.co-create-ad-btn {
    padding: 0.45rem 1rem;
    background: rgba(124, 92, 252, 0.1);
    border: 1px solid rgba(124, 92, 252, 0.3);
    border-radius: 8px;
    color: var(--accent);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-left: auto;
}

.co-create-ad-btn:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}

.escaleta-edit-section {
    background: var(--surface);
    border: 1px solid rgba(124, 92, 252, 0.3);
    border-radius: 12px;
    padding: 1.2rem 1.5rem;
    margin-top: 1rem;
}

.escaleta-edit-header h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.3rem;
}

.escaleta-edit-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.8rem;
}

.escaleta-edit-actions {
    display: flex;
    gap: 0.6rem;
}

/* PDF mode for escaleta */
.escaleta-table.pdf-mode,
.escaleta-table.pdf-mode th,
.escaleta-table.pdf-mode td {
    color: #222 !important;
    background: #fff !important;
    border-color: #ccc !important;
}

.escaleta-table.pdf-mode .escaleta-cell-num { color: #7c5cfc !important; }
.escaleta-table.pdf-mode .escaleta-cell-clip { color: #d946ef !important; }
.escaleta-table.pdf-mode .escaleta-cell-linea { color: #555 !important; }
.escaleta-table.pdf-mode .escaleta-cell-person { color: #2563eb !important; }
.escaleta-table.pdf-mode .escaleta-cell-grab { color: #059669 !important; }
.escaleta-table.pdf-mode thead { background: #f3f4f6 !important; }
.escaleta-table.pdf-mode th { color: #7c5cfc !important; }

/* ========== REPLICAR REFERENCIA ========== */
.replicar-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.replicar-check {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.4rem 0.7rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.2s;
}

.replicar-check:hover {
    border-color: var(--accent);
    color: var(--text);
}

.replicar-check input[type="checkbox"] {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
    cursor: pointer;
}

/* ========== MENSAJES VENDEDORES ========== */
.generate-btn-mensajes {
    background: linear-gradient(135deg, #25d366, #128c7e) !important;
}
.generate-btn-mensajes:hover {
    background: linear-gradient(135deg, #128c7e, #075e54) !important;
    transform: translateY(-1px);
}

.mensajes-cards {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding: 1rem 0;
}

/* --- Mensajes brain selector --- */
.mensajes-brain-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
@media (max-width: 600px) {
    .mensajes-brain-selector { grid-template-columns: 1fr; }
}

/* --- Mensajes mode toggle --- */
.mensajes-mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 0.25rem;
}
.mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1rem;
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-muted);
}
.mode-btn:hover {
    border-color: var(--accent);
    background: rgba(139,92,246,0.05);
}
.mode-btn.active {
    border-color: var(--accent);
    background: rgba(139,92,246,0.1);
    color: var(--text-primary);
}
.mode-btn .mode-icon {
    font-size: 1.5rem;
}
.mode-btn .mode-text {
    font-weight: 600;
    font-size: 0.9rem;
}
.mode-btn .mode-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.mode-btn.active .mode-desc {
    color: var(--accent);
}

.mensaje-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s;
}

.mensaje-card:hover {
    transform: translateY(-2px);
}

.mensaje-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(37, 211, 102, 0.1);
    border-bottom: 1px solid var(--border);
}

.mensaje-num {
    font-weight: 700;
    color: #25d366;
    font-size: 1rem;
}

.mensaje-tipo {
    color: var(--text-muted);
    font-size: 0.85rem;
    font-style: italic;
}

.mensaje-body {
    padding: 1.5rem;
}

.mensaje-text {
    background: rgba(37, 211, 102, 0.08);
    border-radius: 14px 14px 14px 4px;
    padding: 1rem 1.3rem;
    color: var(--text);
    line-height: 1.7;
    font-size: 0.95rem;
    white-space: pre-wrap;
    border-left: 3px solid #25d366;
}

.mensaje-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.mensaje-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.mensaje-meta strong {
    color: var(--text);
}

.mensaje-card-followup {
    border-color: var(--orange);
    border-style: dashed;
}

.mensaje-card-followup .mensaje-header {
    background: rgba(251, 146, 60, 0.12);
}

.mensaje-card-followup .mensaje-num {
    color: var(--orange);
}

.mensaje-card-followup .mensaje-text {
    background: rgba(251, 146, 60, 0.08);
    border-left-color: var(--orange);
}

.mensaje-badge {
    font-size: 0.7rem;
    background: var(--orange);
    color: #000;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
    margin-left: 0.4rem;
    vertical-align: middle;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-container { padding: 1rem; }
    .results-container { padding: 1rem; }
    .header h1 { font-size: 1.4rem; }
    .login-card { padding: 2rem 1.5rem; }
    .results-content { padding: 1.5rem; }
    .nivel-cards { grid-template-columns: 1fr; }
    .tabs-bar { padding: 0 1rem; }
    .results-header { flex-direction: column; align-items: flex-start; }
    .results-actions { width: 100%; flex-wrap: wrap; }
    .new-search-btn { margin-left: 0; width: 100%; text-align: center; }
    .rating-buttons { flex-direction: column; align-items: center; }
    .ratio-cards { justify-content: center; }
    .tabs-bar { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .profile-actions { flex-direction: column; }
    .save-profile-btn { text-align: center; }
    .welcome-modal-card { max-width: 95vw; }
    .welcome-body { padding: 1rem 1.2rem 1.5rem; }
}

/* ============================================================
   META ADS INTEGRATION
   ============================================================ */

/* Sidebar Widget */
.sidebar-meta-widget {
    border-color: #1877f2;
}
.sidebar-meta-widget .sidebar-widget-title {
    color: #1877f2;
    font-size: 0.85rem;
    font-weight: 700;
}
/* Compact sidebar widgets */
.sidebar-widget-compact {
    padding: 0.7rem 0.85rem;
}
.sidebar-compact-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.sidebar-compact-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
}
.sidebar-compact-info {
    flex: 1;
    min-width: 0;
}
.sidebar-compact-title {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
}
.sidebar-compact-desc {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.meta-connect-btn-sm {
    padding: 0.3rem 0.7rem;
    background: #1877f2;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}
.meta-connect-btn-sm:hover { background: #1464cc; }
.meta-disconnect-btn-sm {
    background: rgba(248, 113, 113, 0.15);
    color: #f87171;
    border: none;
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.2s;
}
.meta-disconnect-btn-sm:hover { background: rgba(248, 113, 113, 0.3); }

/* Sidebar action buttons */
.sidebar-action-btn {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px dashed var(--border);
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
    margin-top: 0.5rem;
}
.sidebar-action-meta {
    border-color: rgba(24, 119, 242, 0.3);
    color: #60a5fa;
}
.sidebar-action-meta:hover {
    background: rgba(24, 119, 242, 0.1);
    border-color: #1877f2;
}
.sidebar-action-mensajes {
    border-color: rgba(37, 211, 102, 0.3);
    color: #25d366;
    margin-top: 0;
}
.sidebar-action-mensajes:hover {
    background: rgba(37, 211, 102, 0.1);
    border-color: #25d366;
}

/* ============ IMAGE PICKER POPUP ============ */
.img-picker-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.img-picker-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 620px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.img-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.img-picker-header h3 {
    font-size: 1rem;
    font-weight: 700;
}
.img-picker-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}
.img-picker-close:hover { color: var(--text); }
.img-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 1.25rem;
    overflow-y: auto;
}
.img-picker-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    aspect-ratio: 1;
}
.img-picker-item:hover {
    border-color: var(--accent);
    transform: scale(1.03);
}
.img-picker-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.img-picker-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.3rem 0.5rem;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 600;
    text-align: center;
}
.img-picker-generated {
    border-color: rgba(250, 204, 21, 0.4);
}
.img-picker-generated .img-picker-label {
    background: rgba(250, 204, 21, 0.25);
    color: #facc15;
}

/* ============ DRAFTS TOOLBAR ============ */
.meta-drafts-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.meta-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.meta-toolbar-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
}
.meta-toolbar-btn:hover { border-color: var(--accent); color: var(--accent); }
.meta-toolbar-create {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 1rem;
}
.meta-toolbar-create:hover {
    background: var(--accent-hover);
    color: #fff;
    transform: translateY(-1px);
}
.meta-toolbar-publish {
    background: linear-gradient(135deg, var(--accent), #9333ea);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 0.5rem 1rem;
}
.meta-toolbar-publish:disabled { opacity: 0.4; cursor: not-allowed; }
.meta-toolbar-publish:not(:disabled):hover { transform: translateY(-1px); }
.meta-toolbar-count {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Draft card checkbox */
.draft-select-wrap {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    z-index: 2;
}
.draft-select-cb {
    width: 20px;
    height: 20px;
    accent-color: var(--accent);
    cursor: pointer;
}
.meta-draft-card {
    position: relative;
}
.meta-draft-card.draft-selected {
    border-color: rgba(124, 92, 252, 0.6);
    box-shadow: 0 0 0 2px rgba(124, 92, 252, 0.15);
}

/* ============ PUBLISH PANEL (IN-TAB) ============ */
.meta-publish-panel {
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 14px;
    padding: 2rem;
    margin: 2rem 0;
}
.meta-publish-panel.hidden { display: none; }

.meta-selected-strip {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.6rem 0 0.8rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.meta-selected-thumb {
    flex-shrink: 0;
    width: 70px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--border);
}
.meta-selected-thumb img {
    width: 100%;
    height: 50px;
    object-fit: cover;
}
.meta-selected-thumb .thumb-label {
    font-size: 0.6rem;
    color: var(--text-muted);
    text-align: center;
    padding: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============ COUNTRIES GRID ============ */
.meta-countries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.4rem;
}
.meta-country-cb {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--text);
    cursor: pointer;
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    transition: background 0.15s;
}
.meta-country-cb:hover { background: var(--surface-2); }
.meta-country-cb input { accent-color: var(--accent); cursor: pointer; }

/* ============ AD HISTORY ============ */
.meta-history-grid {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1rem;
}
.meta-history-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    gap: 1.5rem;
    transition: border-color 0.2s;
}
.meta-history-card:hover {
    border-color: var(--accent);
}
.history-thumb {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--surface-2);
}
.history-info {
    flex: 1;
    min-width: 0;
}
.history-text {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.5;
    max-height: 4.5em;
    overflow: hidden;
    margin-bottom: 0.4rem;
}
.history-headline {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
}
.history-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}
.meta-rating-row {
    display: flex;
    gap: 0.3rem;
}
.meta-rating-btn {
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    transition: all 0.15s;
}
.meta-rating-btn:hover { border-color: var(--text); color: var(--text); }
.meta-rating-btn.active-excelente { background: #22c55e; color: #fff; border-color: #22c55e; }
.meta-rating-btn.active-regular { background: #f59e0b; color: #fff; border-color: #f59e0b; }
.meta-rating-btn.active-deficiente { background: #ef4444; color: #fff; border-color: #ef4444; }
.history-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.history-reuse-btn {
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--accent);
    background: transparent;
    color: var(--accent);
    transition: all 0.15s;
}
.history-reuse-btn:hover {
    background: var(--accent);
    color: #fff;
}
.meta-history-empty.hidden { display: none; }

/* Mensajes Vendedores Widget */
.sidebar-mensajes-widget {
    border-color: #25d366;
}
.meta-status-text {
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.4;
    margin-bottom: 0.6rem;
}
.meta-connected-text {
    color: #4ade80;
}
.meta-connect-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.5rem 0.75rem;
    background: #1877f2;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s;
}
.meta-connect-btn:hover {
    background: #166fe5;
}
.meta-disconnect-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 0.4rem 0.75rem;
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}
.meta-disconnect-btn:hover {
    border-color: #f87171;
    color: #f87171;
}

/* Publish Button in results header */
.meta-publish-btn {
    background: #1877f2 !important;
    color: #fff !important;
    border-color: #1877f2 !important;
}
.meta-publish-btn:hover {
    background: #166fe5 !important;
}

/* Sidebar nav meta link */
.sidebar-nav-meta .snav-title {
    color: #1877f2;
}
.sidebar-nav-meta:hover {
    border-color: rgba(24, 119, 242, 0.4);
    background: rgba(24, 119, 242, 0.06);
}

/* ---- Image Popup Overlay ---- */
.bib-image-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: pointer;
}
.bib-image-popup-overlay.hidden { display: none; }
.bib-image-popup-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    background: rgba(255,255,255,0.15);
    border: none;
    color: #fff;
    font-size: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
    z-index: 10001;
}
.bib-image-popup-close:hover { background: rgba(255,255,255,0.3); }
.bib-image-popup-img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5);
    cursor: default;
    object-fit: contain;
}

/* ---- Ad Builder Overlay (full screen) ---- */
.ad-builder-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}
.ad-builder-overlay.hidden { display: none; }

.ad-builder-container {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    width: 100%;
    max-width: 1000px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.ad-builder-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.ad-builder-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    white-space: nowrap;
}
.ad-builder-steps {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    margin-right: 1rem;
}
.ab-step {
    font-size: 0.8rem;
    color: var(--muted);
    font-weight: 500;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    transition: all 0.2s;
}
.ab-step.active {
    color: #1877f2;
    background: rgba(24, 119, 242, 0.1);
    font-weight: 600;
}
.ab-step-arrow {
    color: var(--muted);
    font-size: 0.8rem;
}

.ad-builder-body {
    display: flex;
    gap: 1.5rem;
    padding: 1.5rem;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-width: 0;
}

/* Left: Preview column */
.ab-preview-col {
    flex: 0 0 340px;
    max-width: 340px;
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    align-self: flex-start;
}
.ab-preview-label {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

/* Facebook Ad Preview Mockup */
.fb-ad-preview {
    background: #242526;
    border-radius: 12px;
    overflow: hidden;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    border: 1px solid rgba(255,255,255,0.08);
}
.fb-ad-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 0.9rem 0.5rem;
}
.fb-ad-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1877f2, #7c5cfc);
    flex-shrink: 0;
}
.fb-ad-page-info {
    display: flex;
    flex-direction: column;
}
.fb-ad-page-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #e4e6eb;
}
.fb-ad-sponsored {
    font-size: 0.72rem;
    color: #b0b3b8;
}
.fb-ad-globe {
    font-size: 0.6rem;
}
.fb-ad-text {
    padding: 0.4rem 0.9rem 0.7rem;
    font-size: 0.85rem;
    color: #e4e6eb;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 160px;
    overflow-y: auto;
}
.fb-ad-image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #18191a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.fb-ad-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #65676b;
    font-size: 0.8rem;
    text-align: center;
    padding: 1rem;
}
.fb-ad-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fb-ad-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 0.9rem;
    background: #303133;
    gap: 0.5rem;
}
.fb-ad-bottom-left {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.fb-ad-headline {
    font-size: 0.85rem;
    font-weight: 700;
    color: #e4e6eb;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fb-ad-desc {
    font-size: 0.72rem;
    color: #b0b3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fb-ad-cta-btn {
    flex-shrink: 0;
    background: #e4e6eb;
    color: #050505;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.4rem 0.9rem;
    border-radius: 6px;
    white-space: nowrap;
}

/* Right: Form column */
.ab-form-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.ab-step-content {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.ab-step-content.hidden { display: none; }

/* El grupo del textarea principal crece para ocupar el espacio */
.meta-form-group-grow {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}
.meta-form-group-grow .form-textarea {
    flex: 1;
    width: 100%;
    min-height: 180px;
    resize: vertical;
}

/* Todos los inputs/textareas del ad builder al 100% */
.ab-form-col .form-input,
.ab-form-col .form-select,
.ab-form-col .form-textarea {
    width: 100%;
}

.meta-form-group {
    margin-bottom: 1rem;
}
.meta-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

/* Media type toggle (image/video) */
.ab-media-type-toggle {
    display: flex;
    gap: 0;
    margin-bottom: 0.7rem;
    background: var(--surface-3);
    border-radius: 10px;
    padding: 3px;
}

.ab-media-type-btn {
    flex: 1;
    padding: 0.45rem 0.8rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-muted);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.ab-media-type-btn.active {
    background: var(--accent);
    color: #fff;
}

.ab-media-type-btn:not(.active):hover {
    color: var(--text);
}

/* Media grid for multiple images */
.ab-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.ab-media-grid-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
}

.ab-media-grid-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ab-media-grid-item .ab-media-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 20px;
    height: 20px;
    background: rgba(0,0,0,0.7);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.ab-media-grid-item:hover .ab-media-remove {
    opacity: 1;
}

.ab-media-grid-item .ab-media-badge {
    position: absolute;
    bottom: 3px;
    left: 3px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
}

.ab-media-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.4rem;
}

.ab-media-count strong {
    color: var(--accent);
}

.ab-media-remove-all {
    display: block;
    margin-top: 0.5rem;
    padding: 0.3rem 0.8rem;
    background: rgba(248, 113, 113, 0.1);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 8px;
    color: var(--red);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ab-media-remove-all:hover {
    background: rgba(248, 113, 113, 0.2);
}

.ab-video-preview {
    margin-top: 0.5rem;
}

.ab-video-preview video {
    max-height: 200px;
    background: #000;
}

.ab-image-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.ab-img-btn {
    flex: 1;
    padding: 0.5rem 0.6rem;
    background: var(--card-bg);
    border: 1px dashed var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
}
.ab-img-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.ab-img-preview-small {
    border-radius: 8px;
    overflow: hidden;
    max-height: 120px;
}
.ab-img-preview-small img {
    width: 100%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 8px;
}

.ab-step-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.25rem;
}
.ab-back-btn {
    padding: 0.6rem 1.2rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--muted);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}
.ab-back-btn:hover {
    border-color: var(--text);
    color: var(--text);
}

/* Campaign config sections */
.meta-new-campaign-config {
    background: rgba(24, 119, 242, 0.05);
    border: 1px solid rgba(24, 119, 242, 0.15);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.meta-config-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

/* Age row */
.meta-age-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.meta-age-input {
    width: 70px !important;
    text-align: center;
}
.meta-age-sep {
    color: var(--text-muted);
    font-size: 0.85rem;
}
.form-hint {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

.meta-publish-note {
    background: rgba(250, 204, 21, 0.1);
    border: 1px solid rgba(250, 204, 21, 0.3);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 0.8rem;
    color: #facc15;
    margin-bottom: 1rem;
    line-height: 1.4;
}
.meta-submit-btn {
    flex: 1;
    background: #1877f2 !important;
    border-color: #1877f2 !important;
}
.meta-submit-btn:hover {
    background: #166fe5 !important;
}
.meta-success-box {
    text-align: center;
    padding: 2rem 1rem;
}
.meta-success-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.meta-success-box h3 {
    color: #4ade80;
    margin-bottom: 0.5rem;
}
.meta-success-box p {
    color: var(--muted);
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}

/* Responsive ad builder */
@media (max-width: 800px) {
    .ad-builder-body {
        flex-direction: column;
    }
    .ab-preview-col {
        flex: none;
        width: 100%;
        position: static;
    }
    .fb-ad-preview {
        max-width: 360px;
        margin: 0 auto;
    }
    .ad-builder-steps { display: none; }
}

/* ============================================================
   GENERADOR DE OFERTA MODULE
   ============================================================ */

.oferta-module {
    padding: 0;
}

/* Oferta module uses standard form-container / form-card / form-grid */

/* Result headers */
.oferta-result-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}
.oferta-result-header h2 {
    font-size: 1.4rem;
    font-weight: 800;
}
.oferta-result-actions {
    display: flex;
    gap: 0.5rem;
}
.oferta-action-btn {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    font-family: inherit;
}
.oferta-btn-secondary {
    background: rgba(255,255,255,0.08);
    color: var(--muted);
    border: 1px solid var(--border);
}
.oferta-btn-secondary:hover {
    background: rgba(255,255,255,0.12);
    color: #fff;
}
.oferta-btn-primary {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
}
.oferta-btn-primary:hover {
    background: #6d28d9;
}
.oferta-btn-brief {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.oferta-btn-brief:hover {
    background: rgba(34, 197, 94, 0.2);
    border-color: #22c55e;
}

/* Saved notice */
.oferta-saved-notice {
    margin-top: 1.2rem;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 10px;
    padding: 1rem 1.2rem;
}
.oferta-saved-notice-inner {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.oferta-saved-notice-inner span {
    color: var(--text);
    font-size: 0.9rem;
}
.oferta-saved-notice-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}

/* Phase divider */
.oferta-phase-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2.5rem 0 1.5rem;
    padding: 0;
}
.oferta-phase-divider::before,
.oferta-phase-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}
.oferta-phase-divider span {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}

/* Edit mode */
.oferta-editable {
    transition: background 0.2s, outline 0.2s;
    border-radius: 4px;
}
.oferta-editable.editing {
    background: rgba(124, 92, 252, 0.06);
    outline: 1px dashed rgba(124, 92, 252, 0.3);
    padding: 2px 4px;
    cursor: text;
}
.oferta-editable.editing:focus {
    outline: 2px solid var(--accent);
    background: rgba(124, 92, 252, 0.1);
}

/* Regenerate buttons */
.escalera-peldano-actions,
.proceso-cierre-regen-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.8rem;
    padding-top: 0.6rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.oferta-regen-btn {
    background: rgba(124, 92, 252, 0.1);
    color: var(--accent);
    border: 1px solid rgba(124, 92, 252, 0.25);
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.oferta-regen-btn:hover {
    background: rgba(124, 92, 252, 0.2);
    border-color: var(--accent);
}
.oferta-regen-counter {
    font-size: 0.72rem;
    color: var(--muted);
    opacity: 0.7;
}
.oferta-regen-limit {
    font-size: 0.75rem;
    color: var(--muted);
    opacity: 0.6;
    font-style: italic;
}

/* Peldaño loading state */
.escalera-peldano-loading {
    opacity: 0.7;
}
.peldano-loading-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1.5rem;
    color: var(--muted);
    font-size: 0.85rem;
}
.loading-spinner-sm {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(124, 92, 252, 0.2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

/* Oferta saved cards */
.neg-oferta-card {
    cursor: pointer;
}
.neg-oferta-card-logo {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: contain;
    background: rgba(255,255,255,0.06);
}
.neg-oferta-card-name {
    font-size: 0.9rem;
    color: var(--accent);
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.neg-oferta-card-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.78rem;
    color: var(--muted);
}

/* Brief auto-loaded notice */
.est-brief-auto-notice {
    background: rgba(34, 197, 94, 0.1);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 8px;
    padding: 0.5rem 0.8rem;
    margin-bottom: 0.5rem;
    font-size: 0.8rem;
    color: #22c55e;
    animation: fadeIn 0.3s;
}

/* Opcional tag for interests */
.oferta-opcional-tag {
    display: inline-block;
    background: rgba(250, 204, 21, 0.15);
    color: #facc15;
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.4rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Summary */
.oferta-summary {
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.1), rgba(96, 165, 250, 0.1));
    border: 1px solid rgba(124, 92, 252, 0.2);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 2rem;
}
.oferta-summary p {
    color: var(--text);
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* Escalera visual */
.escalera-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 2rem;
    padding: 1.5rem 0;
}
.escalera-peldano {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
    margin-bottom: -4px;
    position: relative;
}
.escalera-peldano:hover {
    border-color: #7c5cfc;
    transform: translateY(-2px);
    z-index: 2;
}
.escalera-peldano:first-child {
    border-color: rgba(250, 204, 21, 0.4);
    background: linear-gradient(135deg, var(--surface), rgba(250, 204, 21, 0.05));
}
.escalera-peldano:last-child {
    border-color: rgba(96, 165, 250, 0.3);
    background: linear-gradient(135deg, var(--surface), rgba(96, 165, 250, 0.05));
}
.escalera-peldano-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.2rem;
    background: rgba(255,255,255,0.02);
}
.escalera-peldano-emoji {
    font-size: 1.5rem;
    flex-shrink: 0;
}
.escalera-peldano-title {
    flex: 1;
    min-width: 0;
}
.escalera-peldano-title strong {
    display: block;
    font-size: 0.95rem;
    color: #fff;
}
.escalera-peldano-type {
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.escalera-peldano-price {
    font-size: 1rem;
    font-weight: 800;
    color: #4ade80;
    white-space: nowrap;
}
.escalera-peldano-body {
    padding: 0.75rem 1.2rem 1rem;
    border-top: 1px solid var(--border);
}
.escalera-peldano-body p {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.45;
    margin: 0 0 0.5rem;
}
.escalera-peldano-meta {
    font-size: 0.82rem;
    color: var(--muted);
    margin-bottom: 0.3rem;
    line-height: 1.4;
}
.escalera-meta-label {
    font-weight: 600;
    color: var(--text);
}

/* Sections */
.oferta-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
}
.oferta-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border);
}

/* Psychology blocks */
.oferta-psic-block {
    margin-bottom: 1rem;
}
.oferta-psic-block strong {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
}
.oferta-psic-block p {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.5;
    margin: 0;
}
.oferta-psic-block ul {
    list-style: none;
    padding: 0;
    margin: 0.3rem 0 0;
}
.oferta-psic-block li {
    font-size: 0.88rem;
    color: var(--text);
    padding: 0.3rem 0;
    padding-left: 1.2rem;
    position: relative;
    line-height: 1.4;
}
.oferta-psic-block li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #7c5cfc;
    font-weight: 700;
}

/* Por qué funciona */
.oferta-porque {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.6;
}

/* Next step CTA */
.oferta-next-step {
    text-align: center;
    padding: 2rem 1.5rem;
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.08), rgba(96, 165, 250, 0.08));
    border: 1px solid rgba(124, 92, 252, 0.2);
    border-radius: 14px;
    margin-top: 2rem;
}
.oferta-next-step p {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.oferta-next-step .generate-btn {
    max-width: 400px;
    margin: 0 auto;
}

/* === PHASE 2: Oferta Result === */

.oferta-hero {
    background: linear-gradient(135deg, #7c5cfc, #60a5fa);
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
.oferta-hero-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 0.75rem;
}
.oferta-hero-meta {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.oferta-hero-type,
.oferta-hero-price,
.oferta-hero-value {
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.35rem 0.8rem;
    border-radius: 20px;
    background: rgba(255,255,255,0.15);
    color: #fff;
}
.oferta-hero-price {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

/* Pitch grid */
.oferta-pitch-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
.oferta-pitch-item {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
}
.pitch-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.4rem;
}
.oferta-pitch-item p {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.45;
    margin: 0;
}

/* Pitch full */
.oferta-pitch-full {
    background: rgba(124, 92, 252, 0.06);
    border: 1px solid rgba(124, 92, 252, 0.2);
    border-radius: 10px;
    overflow: hidden;
}
.oferta-pitch-full-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: rgba(124, 92, 252, 0.08);
    font-size: 0.85rem;
    font-weight: 600;
}
.oferta-copy-btn {
    padding: 0.3rem 0.7rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}
.oferta-copy-btn:hover {
    background: rgba(255,255,255,0.15);
}
.oferta-pitch-text {
    padding: 1rem;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.6;
}

/* Entregables */
.oferta-entregables {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.oferta-entregable {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.oferta-entregable-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c5cfc, #60a5fa);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.oferta-entregable-content {
    flex: 1;
    min-width: 0;
}
.oferta-entregable-content strong {
    display: block;
    font-size: 0.92rem;
    margin-bottom: 0.25rem;
}
.oferta-entregable-content p {
    font-size: 0.85rem;
    color: var(--muted);
    line-height: 1.4;
    margin: 0 0 0.3rem;
}
.oferta-entregable-valor {
    font-size: 0.78rem;
    color: #4ade80;
    font-weight: 600;
}

/* Campaign meta */
.oferta-campana-meta {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.oferta-campana-item {
    font-size: 0.9rem;
    color: var(--text);
}
.oferta-campana-item strong {
    color: #fff;
}

/* Audience */
.oferta-audiencia {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1rem;
}
.oferta-audiencia h4 {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}
.oferta-audiencia p {
    font-size: 0.85rem;
    color: var(--text);
    margin: 0 0 0.4rem;
}
.oferta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.3rem;
    margin-bottom: 0.5rem;
}
.oferta-tag {
    padding: 0.25rem 0.6rem;
    background: rgba(124, 92, 252, 0.12);
    border: 1px solid rgba(124, 92, 252, 0.25);
    border-radius: 6px;
    font-size: 0.78rem;
    color: #b4a0ff;
}

/* Anuncios estructura */
.oferta-anuncios-estructura {
    margin-top: 1rem;
}
.oferta-anuncios-estructura h4 {
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}
.oferta-anuncio-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.6rem;
}
.oferta-anuncio-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1rem;
    background: rgba(255,255,255,0.02);
}
.oferta-anuncio-tipo {
    padding: 0.2rem 0.6rem;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.oferta-anuncio-formato {
    font-size: 0.82rem;
    color: var(--muted);
}
.oferta-anuncio-body {
    padding: 0.6rem 1rem 0.8rem;
}
.oferta-anuncio-body p {
    font-size: 0.84rem;
    color: var(--text);
    margin: 0 0 0.25rem;
    line-height: 1.4;
}

/* Punto de entrada */
.oferta-punto-entrada {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.08), rgba(96, 165, 250, 0.08));
    border: 1px solid rgba(74, 222, 128, 0.2);
    border-radius: 12px;
    overflow: hidden;
}
.oferta-punto-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    background: rgba(74, 222, 128, 0.06);
}
.oferta-punto-emoji {
    font-size: 2rem;
}
.oferta-punto-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #4ade80;
}
.oferta-punto-body {
    padding: 1rem 1.5rem;
}
.oferta-punto-body p {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.5;
    margin: 0 0 0.6rem;
}

/* === PHASE 3: Proceso de Venta === */

.proceso-fase {
    border-left: 3px solid #7c5cfc;
}
.proceso-subsection {
    margin-bottom: 1rem;
}
.proceso-subsection > strong {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
}
.proceso-list,
.proceso-list-ordered {
    padding-left: 1.2rem;
    margin: 0.3rem 0 0;
}
.proceso-list li,
.proceso-list-ordered li {
    font-size: 0.88rem;
    color: var(--text);
    padding: 0.25rem 0;
    line-height: 1.4;
}

/* Copyable message blocks */
.proceso-mensaje {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.6rem;
}
.proceso-mensaje-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.8rem;
    background: rgba(255,255,255,0.03);
    font-size: 0.82rem;
    font-weight: 600;
}
.proceso-mensaje-body {
    padding: 0.7rem 0.8rem;
    font-size: 0.86rem;
    color: var(--text);
    line-height: 1.5;
    white-space: pre-wrap;
}

/* Calificación preguntas */
.proceso-pregunta {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
}
.proceso-pregunta-text {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.25rem;
    font-style: italic;
}
.proceso-pregunta-why {
    font-size: 0.82rem;
    color: var(--muted);
    margin: 0;
}

/* Scoring */
.proceso-scoring {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.proceso-scoring-nivel {
    padding: 0.7rem 1rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}
.proceso-scoring-nivel p {
    font-size: 0.85rem;
    color: var(--text);
    margin: 0.3rem 0 0;
}

/* Nutrición timeline */
.proceso-timeline {
    position: relative;
    padding-left: 1.5rem;
}
.proceso-timeline::before {
    content: '';
    position: absolute;
    left: 6px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border);
}
.proceso-timeline-item {
    position: relative;
    margin-bottom: 1.25rem;
}
.proceso-timeline-dot {
    position: absolute;
    left: -1.5rem;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #7c5cfc;
    border: 2px solid var(--surface);
    z-index: 1;
}
.proceso-timeline-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}
.proceso-timeline-accion {
    font-size: 0.85rem;
    color: var(--muted);
    margin: 0;
}

/* Objeciones */
.proceso-objecion {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 0.6rem;
}
.proceso-objecion-q {
    padding: 0.7rem 1rem;
    background: rgba(239, 68, 68, 0.06);
    font-size: 0.88rem;
    font-weight: 600;
    color: #fca5a5;
    font-style: italic;
}
.proceso-objecion-a {
    padding: 0.7rem 1rem;
    font-size: 0.86rem;
    color: var(--text);
    line-height: 1.5;
}

/* Plan 30 días */
.proceso-plan {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.proceso-plan-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.proceso-plan-priority {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(124, 92, 252, 0.15);
    color: #b4a0ff;
    font-size: 0.78rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.proceso-plan-content {
    flex: 1;
    min-width: 0;
}
.proceso-plan-content strong {
    font-size: 0.9rem;
    display: block;
    margin-bottom: 0.25rem;
}
.proceso-plan-meta {
    display: flex;
    gap: 1rem;
}

/* Responsive */
@media (max-width: 700px) {
    .oferta-pitch-grid {
        grid-template-columns: 1fr;
    }
    .escalera-peldano {
        width: 100% !important;
    }
    .oferta-hero-meta {
        flex-direction: column;
        align-items: center;
    }
}

/* ============================================================
   META ADS TAB + DRAFTS
   ============================================================ */

/* Tab button style */
.tab-btn-meta {
    color: #1877f2 !important;
}
.tab-btn-meta.active {
    border-bottom-color: #1877f2 !important;
}
.tab-flash {
    animation: tabPulse 0.5s ease 3;
}
@keyframes tabPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Anuncios Meta container padding */
#tabMetaAds {
    padding: 2rem 2.5rem;
}

/* Anuncios Meta header */
.meta-ads-header {
    margin-bottom: 2rem;
}
.meta-ads-header h2 {
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
}

/* Empty state */
.meta-drafts-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--muted);
}
.meta-drafts-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}
.meta-drafts-empty h3 {
    color: var(--text);
    margin-bottom: 0.5rem;
}
.meta-drafts-empty p {
    max-width: 400px;
    line-height: 1.5;
    font-size: 0.9rem;
}

/* Drafts grid */
.meta-drafts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}

/* Draft card */
.meta-draft-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.meta-draft-card:hover {
    border-color: rgba(124, 92, 252, 0.4);
}
.meta-draft-card.draft-complete {
    border-color: rgba(74, 222, 128, 0.3);
}

/* Draft FB mockup (compact) */
.draft-preview {
    padding: 1rem;
}
.draft-fb-mock {
    background: #242526;
    border-radius: 10px;
    overflow: hidden;
    font-size: 0.78rem;
}
.draft-fb-text {
    padding: 0.75rem 0.85rem;
    color: #e4e6eb;
    line-height: 1.45;
    min-height: 90px;
    max-height: 180px;
    overflow: hidden;
    white-space: pre-wrap;
    word-break: break-word;
    position: relative;
    font-size: 0.82rem;
}
.draft-fb-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(transparent, #242526);
}
.draft-fb-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #18191a;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.draft-fb-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.draft-no-img {
    color: #65676b;
    font-size: 0.8rem;
}
.draft-fb-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: #303133;
}
.draft-fb-hl {
    font-weight: 700;
    color: #e4e6eb;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    margin-right: 0.5rem;
}
.draft-fb-cta {
    background: #e4e6eb;
    color: #050505;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    white-space: nowrap;
}

/* Draft actions */
.draft-actions {
    padding: 0.6rem 0.75rem;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.draft-status {
    font-size: 0.75rem;
    color: var(--muted);
}
.draft-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.draft-btn {
    padding: 0.35rem 0.6rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    transition: all 0.2s;
}
.draft-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}
.draft-btn-add {
    border-color: rgba(124, 92, 252, 0.4);
    color: var(--primary);
}
.draft-btn-publish {
    background: #1877f2;
    border-color: #1877f2;
    color: #fff;
}
.draft-btn-publish:hover {
    background: #166fe5;
    color: #fff;
}
.draft-btn-delete {
    color: var(--muted);
}
.draft-btn-delete:hover {
    color: #f87171;
    border-color: #f87171;
}

/* Copy Out → "Guardar para anuncio" buttons */
.copyout-ad-actions {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}
.copy-to-ad-btn, .copy-to-fav-btn {
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    transition: all 0.2s;
}
.copy-to-ad-btn {
    border-color: rgba(24, 119, 242, 0.4);
    color: #1877f2;
}
.copy-to-ad-btn:hover {
    background: rgba(24, 119, 242, 0.1);
}
.copy-to-fav-btn {
    border-color: rgba(250, 204, 21, 0.4);
    color: #facc15;
}
.copy-to-fav-btn:hover {
    background: rgba(250, 204, 21, 0.1);
}

/* ============ APP LAYOUT V2 ============ */
.app-layout-v2 {
    display: flex;
    min-height: 100vh;
}

/* LEFT SIDEBAR */
.sidebar-left {
    width: 260px;
    min-height: 100vh;
    background: var(--surface);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    transition: width 0.3s ease;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar-left.collapsed {
    width: 60px;
}

.sidebar-logo {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.sidebar-logo .logo-badge {
    background: linear-gradient(135deg, var(--accent), #9333ea);
    color: #fff;
    padding: 0.3rem 0.8rem;
    border-radius: 8px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.sidebar-logo .logo-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
}

.collapsed .logo-text { display: none; }

/* Sidebar toggle button */
.sidebar-toggle {
    position: absolute;
    top: 1.25rem;
    right: -12px;
    width: 24px;
    height: 24px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    z-index: 101;
    transition: all 0.2s;
}
.sidebar-toggle:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Sidebar sections */
.sidebar-section {
    padding: 0.75rem;
}
.sidebar-section-title {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0.4rem 0.75rem 0.2rem;
    white-space: nowrap;
}
.collapsed .sidebar-section-title {
    text-align: center;
    font-size: 0;
    padding: 0.3rem;
}
.collapsed .sidebar-section-title::after {
    content: '\2022\2022\2022';
    font-size: 0.6rem;
    color: var(--text-muted);
}

/* Sidebar nav items */
.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    white-space: nowrap;
}
.sidebar-nav-item:hover {
    background: var(--surface-2);
    color: var(--text);
}
.sidebar-nav-item.active {
    background: rgba(124, 92, 252, 0.12);
    color: var(--accent);
    font-weight: 600;
}
.sidebar-nav-item .nav-icon {
    font-size: 1.05rem;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-nav-item .nav-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
}
.sidebar-nav-item.active .nav-icon svg {
    stroke-width: 2;
}
.sidebar-nav-item .nav-label {
    white-space: nowrap;
    overflow: hidden;
}
/* Meta connected state on sidebar nav */
.sidebar-nav-item.meta-connected {
    border-left: 3px solid #4ade80;
    color: #4ade80;
}
.sidebar-nav-item.meta-connected .nav-icon,
.sidebar-nav-item.meta-connected .nav-label {
    color: #4ade80;
}
.sidebar-nav-item.meta-connected:hover {
    color: #4ade80;
}
.collapsed .nav-label { display: none; }

/* Sidebar divider */
.sidebar-divider {
    height: 1px;
    background: var(--border);
    margin: 0.3rem 0.75rem;
}

/* Sidebar Meta widget (compact in sidebar) */
.sidebar-meta-compact {
    padding: 0.55rem 0.65rem;
    margin: 0.3rem 0.75rem;
    background: rgba(24, 119, 242, 0.05);
    border: 1px solid rgba(24, 119, 242, 0.15);
    border-radius: 8px;
}
.sidebar-meta-compact .meta-label {
    font-size: 0.68rem;
    font-weight: 700;
    color: #1877f2;
    margin-bottom: 0.3rem;
}
.sidebar-meta-compact .meta-connect-sm {
    display: block;
    width: 100%;
    padding: 0.4rem;
    background: #1877f2;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: background 0.2s;
}
.sidebar-meta-compact .meta-connect-sm:hover { background: #1464cc; }
.collapsed .sidebar-meta-compact { padding: 0.5rem; margin: 0.5rem 0.3rem; }
.collapsed .sidebar-meta-compact .meta-label { font-size: 0; }
.collapsed .sidebar-meta-compact .meta-label::after { content: '\1F517'; font-size: 1rem; }

/* Sidebar usage mini */
.sidebar-usage-mini {
    padding: 0.75rem;
    margin: 0.5rem 0.75rem;
    background: var(--surface-2);
    border-radius: 10px;
}
.sidebar-usage-mini .usage-mini-title {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}
.sidebar-usage-mini .usage-mini-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.sidebar-usage-mini .usage-mini-bar {
    height: 3px;
    background: var(--surface-3);
    border-radius: 2px;
    margin-bottom: 0.4rem;
    overflow: hidden;
}
.sidebar-usage-mini .usage-mini-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.3s;
}
.collapsed .sidebar-usage-mini { display: none; }

/* User/session area at bottom of sidebar */
.sidebar-footer {
    margin-top: auto;
    padding: 0.4rem 0.75rem;
    border-top: 1px solid var(--border);
}
.sidebar-footer-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.65rem;
    width: 100%;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
}
.sidebar-footer-btn:hover { background: rgba(248, 113, 113, 0.1); color: #f87171; }
.collapsed .sidebar-footer-btn span { display: none; }

/* MAIN CONTENT AREA */
.main-content-v2 {
    margin-left: 260px;
    flex: 1;
    min-height: 100vh;
    transition: margin-left 0.3s ease;
    padding: 0;
}
.sidebar-left.collapsed ~ .main-content-v2 {
    margin-left: 60px;
}

/* Module header */
.module-header {
    padding: 1.5rem 2rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    position: sticky;
    top: 0;
    z-index: 50;
}
.module-header h1 {
    font-size: 1.4rem;
    font-weight: 800;
}
.module-header p {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
}

/* Module body */
.module-body {
    padding: 1.5rem 2rem;
    max-width: 1200px;
}

/* Hide old layout elements */
.app-layout-v2 .top-header { display: none; }
.app-layout-v2 .tab-bar { display: none; }
.app-layout-v2 .sidebar-right { display: none; }

/* Responsive */
@media (max-width: 768px) {
    .sidebar-left {
        width: 60px;
    }
    .sidebar-left .nav-label,
    .sidebar-left .logo-text,
    .sidebar-left .sidebar-section-title,
    .sidebar-left .sidebar-usage-mini { display: none; }
    .main-content-v2 { margin-left: 60px; }
}

/* ===== META SUB-TABS ===== */
.meta-subtabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--border);
    margin-bottom: 2rem;
}
.meta-subtab {
    background: none;
    border: none;
    padding: 0.7rem 1.2rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.2s;
}
.meta-subtab:hover { color: var(--text); }
.meta-subtab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.meta-subcontent { display: none; }
.meta-subcontent.active { display: block; padding-top: 1rem; }

/* ===== PLANNER ===== */
.planner-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 1.25rem;
}
.planner-header .generate-btn {
    width: auto;
}
.planner-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--text-muted);
}
.planner-empty h3 { color: var(--text); margin-bottom: 0.5rem; }
.planner-grid { display: flex; flex-direction: column; gap: 1rem; }
.planner-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    transition: border-color 0.2s;
    margin-bottom: 0.25rem;
}
.planner-card:hover { border-color: var(--accent); }
.planner-card-header {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.planner-card-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.planner-card-info { flex: 1; min-width: 0; }
.planner-card-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 0.15rem;
}
.planner-card-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.planner-card-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.72rem;
    color: var(--text-muted);
}
.planner-card-status {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.planner-status-draft { background: #fbbf24; color: #1a1a2e; }
.planner-status-published { background: #4ade80; color: #1a1a2e; }

.planner-card-ads {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.planner-ad-mini {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.4rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.72rem;
    max-width: 200px;
}
.planner-ad-mini img {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 0.25rem;
}
.planner-ad-no-img {
    width: 28px;
    height: 28px;
    background: var(--surface-2);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    color: var(--text-muted);
}
.planner-ad-text {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.planner-ad-remove {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.9rem;
    padding: 0 0.2rem;
    line-height: 1;
}
.planner-ad-remove:hover { color: #ef4444; }
.planner-card-ads-empty {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
}
.planner-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    justify-content: flex-end;
}
.planner-btn {
    background: none;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.35rem 0.7rem;
    border-radius: 0.4rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.2s;
}
.planner-btn:hover { border-color: var(--accent); color: var(--text); }
.planner-btn-publish { background: var(--accent); color: #fff; border-color: var(--accent); }
.planner-btn-publish:hover { opacity: 0.9; color: #fff; }
.planner-btn-publish:disabled { opacity: 0.4; cursor: not-allowed; }
.planner-btn-delete:hover { border-color: #ef4444; color: #ef4444; }
.planner-published-date { font-size: 0.72rem; color: var(--text-muted); }

/* Pagination */
.planner-pagination {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    margin-top: 1rem;
}
.planner-page-btn {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 0.3rem;
    cursor: pointer;
    font-size: 0.8rem;
}
.planner-page-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Plan picker dropdown */
.planner-pick-dropdown {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    min-width: 320px;
    max-width: 440px;
    overflow: hidden;
}
.planner-pick-header {
    padding: 0.85rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.planner-pick-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    padding: 0.8rem 1.1rem;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.88rem;
    color: var(--text);
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    -webkit-appearance: none;
    appearance: none;
    outline: none;
    position: relative;
    z-index: 1;
}
.planner-pick-item:last-child { border-bottom: none; }
.planner-pick-item:hover { background: var(--surface-2); }
.planner-pick-new { color: var(--accent); font-weight: 600; }
.planner-pick-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    min-width: 340px;
    max-width: 460px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(0,0,0,0.45);
}
.planner-modal-lg {
    max-width: 640px;
    max-height: 85vh;
}
/* Publish summary */
.publish-summary-section {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}
.publish-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0;
    font-size: 0.78rem;
    border-bottom: 1px solid var(--border);
}
.publish-summary-row:last-child { border-bottom: none; }
.publish-summary-label {
    color: var(--text-muted);
    font-weight: 600;
}
.publish-summary-ads {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.publish-summary-ad {
    display: flex;
    gap: 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.75rem;
}
.publish-summary-ad-preview img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.4rem;
}
.publish-summary-no-img {
    width: 60px;
    height: 60px;
    background: var(--surface);
    border-radius: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: var(--text-muted);
}
.publish-summary-ad-info {
    flex: 1;
    min-width: 0;
}

/* Planner modal */
.planner-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.planner-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
}
.planner-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--border);
}
.planner-modal-header h3 { margin: 0; font-size: 1rem; }
.planner-modal-body { padding: 1rem 1.2rem; }
.planner-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.2rem;
    border-top: 1px solid var(--border);
}

/* ===== PRO HEADER ===== */
.pro-header {
    background: linear-gradient(135deg, #12121a 0%, #1a1028 60%, #12121a 100%);
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 2rem 1.25rem;
    position: sticky;
    top: 0;
    z-index: 50;
}
.pro-header-inner {
    max-width: 1200px;
}
.pro-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.pro-header-center {
    text-align: center;
    flex: 1;
    min-width: 0;
}
.pro-header-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 0.1rem;
    white-space: nowrap;
}
.pro-header-pro {
    background: linear-gradient(135deg, var(--accent), #c084fc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-weight: 900;
    padding: 0 0.15em;
}
.pro-header-date {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
}
/* Mi Negocio button in header */
.pro-header-negocio {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.1), rgba(147, 51, 234, 0.08));
    border: 1px solid rgba(124, 92, 252, 0.3);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: 'Poppins', 'Inter', sans-serif;
}
.pro-header-negocio:hover {
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.2), rgba(147, 51, 234, 0.15));
    border-color: var(--accent);
    transform: translateY(-1px);
}
.pro-header-negocio-icon {
    font-size: 1.2rem;
}
.pro-header-negocio-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
}
.pro-header-negocio-badge {
    background: linear-gradient(135deg, var(--accent), #9333ea);
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.pro-header-actions {
    display: flex;
    gap: 0.6rem;
    flex-shrink: 0;
}
.pro-header-btn {
    padding: 0.55rem 1.2rem;
    border-radius: 10px;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border: 1px solid rgba(124, 92, 252, 0.3);
    background: rgba(124, 92, 252, 0.08);
    color: #c4b5fd;
}
.pro-header-btn:hover {
    background: rgba(124, 92, 252, 0.2);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}
.pro-header-btn-bib {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.35);
    color: #6ee7b7;
}
.pro-header-btn-bib:hover {
    background: rgba(16, 185, 129, 0.25);
    border-color: #10b981;
    color: #fff;
}
.pro-header-btn-hist {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.35);
    color: #93bbfd;
}
.pro-header-btn-hist:hover {
    background: rgba(96, 165, 250, 0.25);
    border-color: #60a5fa;
    color: #fff;
}
.pro-header-btn-caps {
    background: rgba(251, 146, 60, 0.1);
    border-color: rgba(251, 146, 60, 0.35);
    color: #fdba74;
    text-decoration: none;
}
.pro-header-btn-caps:hover {
    background: rgba(251, 146, 60, 0.25);
    border-color: #fb923c;
    color: #fff;
}

/* Responsive pro-header */
@media (max-width: 768px) {
    .pro-header-row { flex-direction: column; gap: 0.5rem; }
    .pro-header-negocio-label { display: none; }
    .pro-header-negocio-badge { display: none; }
    .pro-header-actions { justify-content: center; }
}

/* ===== TEXT EDITOR MODAL ===== */
.text-editor-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}
.text-editor-overlay.hidden { display: none; }
.text-editor-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 90%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.text-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.text-editor-header h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.text-editor-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 0.3rem;
    line-height: 1;
}
.text-editor-close:hover { color: var(--text); }
.text-editor-body {
    padding: 1rem 1.5rem;
    flex: 1;
    min-height: 0;
}
.text-editor-textarea {
    width: 100%;
    min-height: 320px;
    max-height: 55vh;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.88rem;
    line-height: 1.65;
    padding: 1rem 1.2rem;
    resize: vertical;
}
.text-editor-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.text-editor-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.6rem;
    padding: 0.85rem 1.5rem;
    border-top: 1px solid var(--border);
}
.text-editor-btn {
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    font-family: 'Poppins', 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.text-editor-btn-cancel {
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.text-editor-btn-cancel:hover { color: var(--text); border-color: var(--text-muted); }
.text-editor-btn-copy {
    background: rgba(96, 165, 250, 0.12);
    border: 1px solid rgba(96, 165, 250, 0.3);
    color: var(--blue);
}
.text-editor-btn-copy:hover { background: rgba(96, 165, 250, 0.25); color: #fff; }
.text-editor-btn-save {
    background: var(--accent);
    border: 1px solid var(--accent);
    color: #fff;
}
.text-editor-btn-save:hover { background: var(--accent-hover); }

/* ============================================================
   METRICAS INSTAGRAM
   ============================================================ */

#tabMetricasIG {
    padding: 2rem 2.5rem;
}
#tabMetricasIG .metricas-header {
    margin-bottom: 1.75rem;
}
#tabMetricasIG .metricas-header h2 {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
}
#tabMetricasIG .metricas-controls {
    margin-bottom: 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
}

/* IG Connect message */
.ig-connect-msg {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
}

/* IG Permissions banner */
.ig-perms-banner {
    display: flex;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgba(250, 204, 21, 0.08);
    border: 1px solid rgba(250, 204, 21, 0.25);
    border-radius: 12px;
    margin: 1.25rem 0 1.75rem;
}
.ig-perms-icon {
    font-size: 1.3rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.ig-perms-text {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.6;
}
.ig-perms-text strong {
    color: #facc15;
    font-size: 0.85rem;
}
.ig-perms-text p {
    margin: 0.3rem 0 0.5rem;
}
.ig-perms-text ol {
    padding-left: 1.2rem;
    margin: 0;
}
.ig-perms-text ol li {
    margin-bottom: 0.25rem;
}
.ig-perms-text code {
    background: rgba(124, 92, 252, 0.15);
    color: var(--accent);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.75rem;
}
.ig-perms-text a {
    color: var(--accent);
    text-decoration: underline;
}

/* IG Profile card */
.ig-profile-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    margin-bottom: 1.75rem;
}
.ig-profile-card.hidden { display: none; }
.ig-profile-pic {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--accent);
}
.ig-profile-info {
    flex: 1;
}
.ig-profile-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.3rem;
}
.ig-profile-stats {
    display: flex;
    gap: 1.25rem;
    flex-wrap: wrap;
}
.ig-stat {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.ig-stat strong {
    color: var(--text);
    font-weight: 700;
}

/* IG Sections spacing */
#igBreakdownSection,
#igTopPostsSection {
    margin-top: 2rem;
}
#igBreakdownSection .metricas-section-title,
#igTopPostsSection .metricas-section-title {
    margin-bottom: 0.75rem;
}

/* IG KPIs spacing */
#igKpisContainer {
    margin-bottom: 0.5rem;
}
#igKpisContainer .metricas-kpi-card {
    padding: 1.25rem 1rem;
}

/* IG Breakdown grid */
.ig-breakdown-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 0.75rem;
}
.ig-breakdown-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem 1rem;
    text-align: center;
    transition: border-color 0.2s;
}
.ig-breakdown-card:hover {
    border-color: var(--accent);
}
.ig-breakdown-icon {
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
}
.ig-breakdown-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.6rem;
}
.ig-breakdown-stats {
    display: flex;
    justify-content: center;
    gap: 1rem;
}
.ig-breakdown-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.ig-breakdown-num {
    font-size: 1rem;
    font-weight: 700;
    color: var(--accent);
}
.ig-breakdown-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* IG Top posts grid */
.ig-top-posts-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
}
.ig-post-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    transition: border-color 0.2s;
}
.ig-post-card:hover {
    border-color: var(--accent);
}
.ig-post-rank {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--accent);
    min-width: 28px;
    text-align: center;
}
.ig-post-thumb-wrap {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}
.ig-post-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ig-post-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-hover);
    font-size: 1.5rem;
}
.ig-post-type-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 0.7rem;
    background: rgba(0,0,0,0.6);
    padding: 2px 4px;
    border-radius: 4px;
}
.ig-post-info {
    flex: 1;
    min-width: 0;
}
.ig-post-caption {
    font-size: 0.8rem;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.35rem;
}
.ig-post-metrics {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.ig-post-metric {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.ig-post-total {
    font-weight: 700;
    color: #f97316;
}
.ig-post-date {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
}

/* IG period buttons */
.ig-period-btns {
    display: flex;
    gap: 0.3rem;
}

@media (max-width: 640px) {
    .ig-profile-card {
        flex-direction: column;
        text-align: center;
    }
    .ig-profile-stats {
        justify-content: center;
    }
    .ig-post-card {
        flex-direction: column;
        text-align: center;
    }
    .ig-post-metrics {
        justify-content: center;
    }
    .ig-breakdown-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ========== WALLET MODULE ========== */
.wallet-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 1.5rem 0;
}

.wallet-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 2rem;
}
.wallet-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
}
.wallet-month-badge {
    background: var(--accent);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.9rem;
    border-radius: 20px;
    text-transform: capitalize;
}

/* Profile Card */
.wallet-profile-card {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}
.wallet-profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--surface-3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}
.wallet-profile-info {
    flex: 1;
    min-width: 0;
}
.wallet-profile-name {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.wallet-profile-detail {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.wallet-profile-id {
    font-size: 0.7rem;
    color: var(--text-muted);
    opacity: 0.6;
    font-family: monospace;
}
.wallet-profile-edit-btn {
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.wallet-profile-edit-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
}

/* Section titles */
.wallet-section-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 2rem 0 0.3rem;
}
.wallet-section-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

/* Usage Grid */
.wallet-usage-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}
.wallet-usage-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.2rem;
    transition: all 0.2s;
}
.wallet-usage-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.wallet-usage-empty {
    border-color: rgba(248, 113, 113, 0.3);
}
.wallet-usage-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}
.wallet-usage-icon {
    font-size: 1.3rem;
}
.wallet-usage-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}
.wallet-usage-numbers {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-bottom: 0.6rem;
}
.wallet-usage-remaining {
    font-size: 1.8rem;
    font-weight: 800;
    line-height: 1;
}
.wallet-usage-low {
    color: var(--orange);
}
.wallet-usage-empty .wallet-usage-remaining {
    color: var(--red);
}
.wallet-usage-of {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.wallet-usage-bar-bg {
    width: 100%;
    height: 6px;
    background: var(--surface-3);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.wallet-usage-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}
.wallet-usage-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.wallet-bonus-badge {
    background: rgba(52, 211, 153, 0.15);
    color: var(--green);
    padding: 0.1rem 0.5rem;
    border-radius: 10px;
    font-weight: 600;
}
.wallet-buy-inline {
    width: 100%;
    margin-top: 0.8rem;
    padding: 0.5rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.wallet-buy-inline:hover {
    background: var(--accent-hover);
}

/* Packages Grid */
.wallet-packages-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 1rem;
}
.wallet-package-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    transition: border-color 0.2s;
}
.wallet-package-card:hover {
    border-color: var(--accent);
}
.wallet-package-icon {
    font-size: 1.5rem;
    width: 40px;
    text-align: center;
    flex-shrink: 0;
}
.wallet-package-info {
    flex: 1;
}
.wallet-package-name {
    font-size: 0.9rem;
    font-weight: 600;
}
.wallet-package-amount {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.wallet-package-action {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex-shrink: 0;
}
.wallet-package-price {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--green);
}
.wallet-package-btn {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.wallet-package-btn:hover {
    background: var(--accent-hover);
}

/* Purchase History */
.wallet-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.wallet-history-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    font-size: 0.82rem;
}
.wallet-history-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.wallet-history-cat {
    font-weight: 600;
}
.wallet-history-date {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.wallet-history-amount {
    color: var(--green);
    font-weight: 700;
}
.wallet-history-paid {
    color: var(--text-muted);
    font-size: 0.78rem;
}

/* Loading state */
.wallet-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3rem;
    color: var(--text-muted);
    grid-column: 1 / -1;
}

/* API Keys Section */
.wallet-apikeys-grid {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-bottom: 2rem;
}
.wallet-apikey-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.2rem;
}
.wallet-apikey-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}
.wallet-apikey-icon {
    font-size: 1.6rem;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3);
    border-radius: 12px;
    flex-shrink: 0;
}
.wallet-apikey-info {
    flex: 1;
}
.wallet-apikey-name {
    font-weight: 700;
    font-size: 0.95rem;
}
.wallet-apikey-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.wallet-apikey-status {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    border-radius: 20px;
    background: rgba(248, 113, 113, 0.12);
    color: var(--red);
    white-space: nowrap;
}
.wallet-apikey-status.wallet-apikey-active {
    background: rgba(52, 211, 153, 0.12);
    color: var(--green);
}
.wallet-apikey-form {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.wallet-apikey-input {
    font-family: monospace;
    font-size: 0.82rem;
    letter-spacing: 0.5px;
}
.wallet-apikey-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.wallet-apikey-save {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 1.2rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.wallet-apikey-save:hover { background: var(--accent-hover); }
.wallet-apikey-delete {
    background: transparent;
    color: var(--red);
    border: 1px solid rgba(248, 113, 113, 0.3);
    border-radius: 8px;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s;
}
.wallet-apikey-delete:hover {
    background: rgba(248, 113, 113, 0.1);
}
.wallet-apikey-link {
    font-size: 0.78rem;
    color: var(--accent);
    text-decoration: none;
    margin-left: auto;
}
.wallet-apikey-link:hover { text-decoration: underline; }

/* Responsive */
@media (max-width: 768px) {
    .wallet-usage-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .wallet-profile-card {
        flex-wrap: wrap;
    }
    .wallet-profile-edit-btn {
        width: 100%;
        text-align: center;
    }
    .wallet-package-card {
        flex-wrap: wrap;
    }
}
@media (max-width: 480px) {
    .wallet-usage-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   INVESTIGADOR DE CLIENTES
   ============================================= */
.inv-header { margin-bottom: 1rem; }
.inv-header h3 { margin-bottom: 0.3rem; }

/* ============================================================
   INVESTIGADOR REDISEÑO — hero + valueprops + form polish
   ============================================================ */
.inv-hero {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.16), rgba(99, 102, 241, 0.10));
    border: 1px solid rgba(139, 92, 246, 0.3);
    position: relative;
    overflow: hidden;
}
.inv-hero::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -10%;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.25), transparent 70%);
    pointer-events: none;
}
.inv-hero-icon {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.4);
    position: relative;
    z-index: 1;
}
.inv-hero-icon i {
    width: 28px;
    height: 28px;
    color: #fff;
}
.inv-hero-body {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.inv-hero-title {
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem;
    font-family: 'Playfair Display', Georgia, serif;
}
.inv-hero-sub {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 1rem;
    max-width: 640px;
}
.inv-hero-sub strong { color: var(--text); font-weight: 600; }
.inv-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.inv-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.75rem;
    color: var(--text);
    font-weight: 500;
}
.inv-hero-badge i {
    width: 14px;
    height: 14px;
    color: #a78bfa;
}

.inv-valueprops {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.inv-valueprop {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface-2, rgba(255, 255, 255, 0.02));
    transition: all 0.2s;
}
.inv-valueprop:hover {
    border-color: rgba(139, 92, 246, 0.4);
    transform: translateY(-2px);
}
.inv-valueprop-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
}
.inv-valueprop-icon i {
    width: 18px;
    height: 18px;
    color: #a78bfa;
}
.inv-valueprop-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}
.inv-valueprop-text strong {
    font-size: 0.88rem;
    color: var(--text);
    font-weight: 600;
}
.inv-valueprop-text span {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Form head con número y subtítulo */
.inv-form-head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 0;
    margin-bottom: 0.5rem;
}
.inv-form-head-2 {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}
.inv-form-head-step {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.4);
}
.inv-form-head > div:last-child {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.inv-form-head strong {
    font-size: 1rem;
    color: var(--text);
    font-weight: 600;
}
.inv-form-head span {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Numero por pregunta + helper inferior */
.inv-question .form-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
}
.inv-question .form-label i {
    width: 16px;
    height: 16px;
    color: #a78bfa;
}
.inv-q-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
    font-size: 0.75rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.inv-q-helper {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.375rem;
    flex-wrap: wrap;
}
.inv-q-hint {
    font-size: 0.76rem;
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}
.inv-q-counter {
    font-size: 0.72rem;
    color: var(--text-muted);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.inv-q-counter.is-over {
    color: #ef4444;
    font-weight: 700;
}

/* Form actions con CTA visible */
.inv-form-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.inv-generate-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}
.inv-generate-btn i {
    width: 18px;
    height: 18px;
}
.inv-usage {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ============================================================
   INVESTIGADOR — STATE SLOT (detected card / partial / empty)
   ============================================================ */
.inv-detected-card {
    border-radius: 14px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
}
.inv-detected-card.inv-detected-complete {
    border-color: rgba(16, 185, 129, 0.4);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.10), rgba(16, 185, 129, 0.04));
}
.inv-detected-card.inv-detected-partial {
    border-color: rgba(251, 191, 36, 0.4);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.10), rgba(251, 191, 36, 0.04));
}
.inv-detected-card.inv-detected-empty {
    border-style: dashed;
    text-align: center;
    padding: 2rem 1.5rem;
}
.inv-detected-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.inv-detected-header > i {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.inv-detected-complete .inv-detected-header > i { color: #10b981; }
.inv-detected-partial .inv-detected-header > i { color: #f59e0b; }
.inv-detected-header strong {
    font-size: 1rem;
    color: var(--text);
    font-weight: 700;
}
.inv-detected-tag {
    margin-left: auto;
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
}
.inv-detected-tag-warn {
    background: rgba(251, 191, 36, 0.18);
    color: #f59e0b;
}

.inv-detected-body {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.inv-detected-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}
.inv-detected-row > i {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #a78bfa;
}
.inv-detected-row > div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.inv-detected-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.inv-detected-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.inv-detected-list li {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.4;
    padding-left: 0.875rem;
    position: relative;
}
.inv-detected-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #a78bfa;
}
.inv-detected-more {
    color: var(--text-muted) !important;
    font-style: italic;
    font-size: 0.78rem !important;
}
.inv-detected-text {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.45;
    margin: 0;
}

.inv-detected-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.inv-detected-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.inv-detected-btn-secondary:hover {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.08);
}
.inv-detected-btn-secondary i {
    width: 14px;
    height: 14px;
}

/* Checklist en estado partial */
.inv-detected-checklist {
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.inv-detected-checklist li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.86rem;
}
.inv-detected-checklist li i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.inv-detected-checklist li.is-ok { color: var(--text); }
.inv-detected-checklist li.is-ok i { color: #10b981; }
.inv-detected-checklist li.is-missing { color: var(--text-muted); }
.inv-detected-checklist li.is-missing i { color: #ef4444; }

/* Caminos A/B en estado partial */
.inv-detected-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}
@media (max-width: 600px) {
    .inv-detected-paths { grid-template-columns: 1fr; }
}
.inv-detected-path {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface, rgba(255,255,255,0.02));
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
}
.inv-detected-path:hover {
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-1px);
}
.inv-detected-path-recommended {
    border-color: rgba(139, 92, 246, 0.5);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(99, 102, 241, 0.06));
}
.inv-detected-path > i:first-child {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #a78bfa;
}
.inv-detected-path > i:last-child {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--text-muted);
    margin-left: auto;
}
.inv-detected-path > div {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.inv-detected-path strong {
    font-size: 0.92rem;
    font-weight: 700;
}
.inv-detected-path span {
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Estado empty (0/3) */
.inv-detected-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 16px;
    background: rgba(139, 92, 246, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}
.inv-detected-empty-icon i {
    width: 28px;
    height: 28px;
    color: #a78bfa;
}
.inv-detected-empty strong {
    display: block;
    font-size: 1.05rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.inv-detected-empty p {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 auto 1.25rem;
    max-width: 460px;
}
.inv-detected-empty .pm-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.inv-detected-skip {
    display: block;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    margin-top: 0.5rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: 0.65;
}
.inv-detected-skip:hover { opacity: 1; }

/* Header del fallback (3 preguntas viejas, ocultas por defecto) */
.inv-fallback-fields {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--border);
}
.inv-fallback-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 10px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.25);
    flex-wrap: wrap;
}
.inv-fallback-header i {
    width: 18px;
    height: 18px;
    color: #f59e0b;
    flex-shrink: 0;
}
.inv-fallback-header strong {
    font-size: 0.9rem;
    color: var(--text);
}
.inv-fallback-header span {
    font-size: 0.78rem;
    color: var(--text-muted);
    flex-basis: 100%;
    margin-left: 1.625rem;
}

/* ============================================================
   CAMPAIGN WIZARD — Strategist de campañas Meta
   ============================================================ */
.cw-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(10px);
    z-index: 9998;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.cw-card {
    width: 100%;
    max-width: 920px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.cw-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid var(--border);
}
.cw-header-left {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-shrink: 0;
}
.cw-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
}
.cw-back-btn:hover { border-color: rgba(168, 85, 247, 0.4); background: rgba(168, 85, 247, 0.08); }
.cw-back-btn i { width: 14px; height: 14px; }
.cw-step-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 600;
}
.cw-progress-wrap {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.cw-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #6366f1);
    border-radius: 2px;
    transition: width 0.3s ease;
}
.cw-close-btn {
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.6rem;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
}
.cw-close-btn:hover { background: rgba(239, 68, 68, 0.1); color: #ef4444; }

.cw-body {
    flex: 1;
    overflow-y: auto;
    padding: 2rem 2rem 1.5rem;
}
.cw-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2, transparent);
}
.cw-footer button { min-width: 120px; }
.cw-prev-btn, .cw-next-btn {
    padding: 0.6rem 1.25rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    transition: all 0.15s;
}
.cw-prev-btn:hover { border-color: var(--border-strong, var(--border)); }
.cw-next-btn {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    border-color: transparent;
    color: #fff;
    margin-left: auto;
}
.cw-next-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(168, 85, 247, 0.4); }

/* SCREEN HERO */
.cw-screen-hero {
    margin-bottom: 1.5rem;
    text-align: center;
}
.cw-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem;
    font-family: 'Playfair Display', Georgia, serif;
}
.cw-sub {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 auto;
    max-width: 620px;
}

/* TYPE / SUB-TEST CARDS */
.cw-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.875rem;
}
.cw-type-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem 1.25rem;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--surface-2, rgba(255, 255, 255, 0.02));
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
}
.cw-type-card:hover {
    transform: translateY(-3px);
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 12px 28px rgba(168, 85, 247, 0.18);
}
.cw-type-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.3);
}
.cw-type-icon i { width: 22px; height: 22px; color: #fff; }
.cw-type-card strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.cw-type-card span {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* OPTIONS GRID (inputs visuales) */
.cw-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.625rem;
}
.cw-options-grid-2 {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.cw-option-card {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.875rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: var(--surface, rgba(255, 255, 255, 0.02));
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: all 0.18s;
}
.cw-option-card:hover {
    border-color: rgba(168, 85, 247, 0.4);
}
.cw-option-card.is-selected {
    border-color: rgba(168, 85, 247, 0.7);
    background: rgba(168, 85, 247, 0.10);
}
.cw-option-card i {
    width: 18px;
    height: 18px;
    color: #a78bfa;
}
.cw-option-card strong { font-size: 0.95rem; font-weight: 700; }
.cw-option-card span { font-size: 0.82rem; color: var(--text-muted); line-height: 1.45; }
.cw-option-sm {
    padding: 0.625rem 0.875rem;
    flex-direction: row;
    align-items: center;
}
.cw-option-sm span { font-size: 0.85rem; color: var(--text); }

/* SEGMENTED CONTROL */
.cw-segmented {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.cw-segmented-lg .cw-seg-btn { padding: 0.75rem 1.25rem; font-size: 0.95rem; }
.cw-seg-btn {
    flex: 1;
    min-width: 80px;
    padding: 0.5rem 0.875rem;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface-2, rgba(255, 255, 255, 0.02));
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.cw-seg-btn:hover { border-color: rgba(168, 85, 247, 0.4); }
.cw-seg-btn.is-active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(99, 102, 241, 0.10));
    border-color: rgba(168, 85, 247, 0.7);
    color: #c4b5fd;
}

/* FORM */
.cw-form { display: flex; flex-direction: column; gap: 1.25rem; max-width: 620px; margin: 0 auto; }
.cw-field { display: flex; flex-direction: column; gap: 0.5rem; }
.cw-label { font-size: 0.85rem; font-weight: 600; color: var(--text); }
.cw-input {
    padding: 0.625rem 0.875rem;
    border-radius: 10px;
    border: 1.5px solid var(--border);
    background: var(--surface, rgba(255, 255, 255, 0.02));
    color: var(--text);
    font-size: 0.92rem;
    transition: border-color 0.15s;
}
.cw-input:focus {
    outline: none;
    border-color: rgba(168, 85, 247, 0.6);
    background: rgba(168, 85, 247, 0.04);
}
.cw-input-mini { width: 90px; }
.cw-range-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: var(--text-muted);
}
.cw-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.cw-budget-summary {
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.25);
    font-size: 0.85rem;
    color: var(--text);
}

/* CHECKLIST */
.cw-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.cw-check-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.875rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2, rgba(255, 255, 255, 0.02));
    cursor: pointer;
    transition: all 0.15s;
}
.cw-check-item:hover { border-color: rgba(168, 85, 247, 0.4); }
.cw-check-item input { width: 18px; height: 18px; accent-color: #a855f7; }
.cw-check-item span { font-size: 0.9rem; color: var(--text); }
.cw-check-item small { color: var(--text-muted); font-size: 0.78rem; }
.cw-check-item-special {
    border-style: dashed;
    background: rgba(251, 191, 36, 0.05);
    border-color: rgba(251, 191, 36, 0.3);
}
.cw-divider {
    height: 1px;
    background: var(--border);
    margin: 0.875rem 0;
}

/* WARNINGS */
.cw-warning {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.3);
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.45;
}
.cw-warning i { width: 18px; height: 18px; color: #f59e0b; flex-shrink: 0; }

/* REVIEW */
.cw-review {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    background: var(--surface-2, rgba(255, 255, 255, 0.02));
    max-width: 620px;
    margin: 0 auto;
}
.cw-review-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.88rem;
}
.cw-review-row:last-child { border-bottom: none; }
.cw-review-row span { color: var(--text-muted); }
.cw-review-row strong { color: var(--text); text-align: right; max-width: 60%; }

/* PLAN VIEW */
.cw-plan-wrap { display: flex; flex-direction: column; gap: 1rem; }
.cw-plan-header { text-align: center; padding: 1rem 0; }
.cw-plan-title {
    margin: 0 0 0.5rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    font-family: 'Playfair Display', Georgia, serif;
}
.cw-plan-summary {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    max-width: 720px;
    margin: 0 auto;
}
.cw-plan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.875rem;
}
@media (max-width: 700px) { .cw-plan-grid { grid-template-columns: 1fr; } }
.cw-plan-section {
    padding: 1.1rem 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface, rgba(255, 255, 255, 0.02));
}
.cw-plan-section-hero {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.10), rgba(99, 102, 241, 0.05));
    border-color: rgba(168, 85, 247, 0.3);
}
.cw-plan-section h4 {
    margin: 0 0 0.625rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.cw-plan-section h4 i { width: 14px; height: 14px; color: #a78bfa; }
.cw-plan-big {
    display: block;
    font-size: 1.3rem;
    color: var(--text);
    margin-bottom: 0.375rem;
}
.cw-plan-section p {
    margin: 0.25rem 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
}
.cw-plan-note {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.78rem;
}
.cw-plan-purpose {
    color: var(--text-muted);
    font-style: italic;
    font-size: 0.85rem;
    margin: 0.25rem 0 0.625rem;
}
.cw-plan-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem 1rem;
    margin-top: 0.5rem;
    font-size: 0.82rem;
}
.cw-plan-meta strong { color: var(--text-muted); font-weight: 600; }
.cw-plan-tag-row {
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}
.cw-plan-tag {
    padding: 0.2rem 0.5rem;
    background: rgba(168, 85, 247, 0.18);
    color: #c4b5fd;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
}
.cw-plan-tag-lk {
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
}
.cw-plan-h3 {
    margin: 1rem 0 0.5rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.cw-plan-placements > div {
    margin-bottom: 0.4rem;
    font-size: 0.88rem;
    color: var(--text);
}
.cw-plan-ads-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0.75rem;
}
.cw-plan-ad {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2, rgba(255, 255, 255, 0.02));
}
.cw-plan-ad-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cw-plan-ad-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cw-plan-ad-format {
    margin-left: auto;
    padding: 0.15rem 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 700;
}
.cw-plan-ad-hook {
    display: flex;
    gap: 0.375rem;
    align-items: flex-start;
    font-size: 0.92rem;
    line-height: 1.4;
    font-weight: 500;
    font-style: italic;
    color: var(--text);
    padding: 0.5rem 0.625rem;
    background: rgba(251, 191, 36, 0.08);
    border-left: 3px solid #fbbf24;
    border-radius: 6px;
}
.cw-plan-ad-hook i { width: 14px; height: 14px; color: #fbbf24; flex-shrink: 0; margin-top: 4px; }
.cw-plan-ad-text {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.cw-plan-ad-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.875rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.cw-plan-ad-meta strong { color: var(--text); font-weight: 600; }

/* Idea de anuncio (rationale) */
.cw-plan-ad-idea {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
    padding: 0.5rem 0.625rem;
    background: rgba(168, 85, 247, 0.06);
    border-radius: 6px;
    border-left: 2px solid rgba(168, 85, 247, 0.4);
}
.cw-plan-ad-idea strong { color: #c4b5fd; font-weight: 700; }

/* Tags de estado del ad */
.cw-plan-ad-tag {
    margin-left: auto;
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cw-plan-ad-tag-regen { background: rgba(16, 185, 129, 0.18); color: #10b981; }
.cw-plan-ad-tag-edit { background: rgba(251, 191, 36, 0.18); color: #f59e0b; }
.cw-plan-ad-tag-saved { background: rgba(16, 185, 129, 0.18); color: #10b981; }
.cw-plan-ad-tag-saved + .cw-plan-ad-tag-regen,
.cw-plan-ad-tag-saved + .cw-plan-ad-tag-edit { display: none; }

/* Acciones del ad card */
.cw-plan-ad-actions {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}
.cw-plan-ad-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.625rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    flex: 1 1 auto;
}
.cw-plan-ad-btn:hover {
    border-color: rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.08);
}
.cw-plan-ad-btn-primary {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
    border-color: transparent;
    flex: 1.5 1 auto;
}
.cw-plan-ad-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(168, 85, 247, 0.35);
    background: linear-gradient(135deg, #a855f7, #6366f1);
}
.cw-plan-ad-btn i { width: 13px; height: 13px; }

/* Estado regenerando */
.cw-plan-ad.is-regenerating {
    opacity: 0.55;
    pointer-events: none;
    position: relative;
}
.cw-plan-ad.is-regenerating::after {
    content: 'Regenerando...';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4b5fd;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    font-size: 0.85rem;
}

/* Editor inline */
.cw-plan-ad-editor {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.cw-plan-ad-editor .cw-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 700;
}
.cw-plan-ad-editor .cw-input {
    font-size: 0.85rem;
    padding: 0.5rem 0.625rem;
}
.cw-plan-ad-editor textarea.cw-input {
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
}
.cw-plan-ad-editor-actions {
    display: flex;
    gap: 0.4rem;
    justify-content: flex-end;
    margin-top: 0.25rem;
}

.cw-plan-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
}
.cw-plan-kpi {
    display: flex;
    justify-content: space-between;
    padding: 0.625rem 0.875rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2, rgba(255, 255, 255, 0.02));
    font-size: 0.85rem;
}
.cw-plan-kpi span { color: var(--text-muted); }
.cw-plan-kpi strong { color: var(--text); font-variant-numeric: tabular-nums; }
.cw-plan-watchpoints {
    margin: 0.5rem 0;
    padding-left: 1.25rem;
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.6;
}

.cw-plan-actions {
    display: flex;
    gap: 0.625rem;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

/* DRAFTS LIST */
.cw-drafts-section { margin-top: 2rem; }
.cw-drafts-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.875rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.cw-drafts-title i { width: 18px; height: 18px; color: #a78bfa; }
.cw-drafts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0.75rem;
}
.cw-draft-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface, rgba(255, 255, 255, 0.02));
    transition: all 0.18s;
}
.cw-draft-card:hover {
    border-color: rgba(168, 85, 247, 0.4);
    transform: translateY(-2px);
}
.cw-draft-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.72rem;
}
.cw-draft-mode-tag {
    padding: 0.15rem 0.5rem;
    border-radius: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-size: 0.65rem;
}
.cw-draft-mode-testeo { background: rgba(6, 182, 212, 0.18); color: #06b6d4; }
.cw-draft-mode-prospeccion { background: rgba(251, 191, 36, 0.18); color: #f59e0b; }
.cw-draft-mode-retargeting { background: rgba(16, 185, 129, 0.18); color: #10b981; }
.cw-draft-date { color: var(--text-muted); }
.cw-draft-name {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.cw-draft-meta {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.cw-draft-actions {
    display: flex;
    gap: 0.375rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.cw-draft-action {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.4rem;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.78rem;
    transition: all 0.15s;
}
.cw-draft-action:hover { border-color: rgba(168, 85, 247, 0.4); }
.cw-draft-action i { width: 14px; height: 14px; }
.cw-draft-action-danger {
    flex: 0 0 auto;
    padding: 0.4rem 0.625rem;
}
.cw-draft-action-danger:hover {
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}

/* PUBLISH FLOW (Sprint 2) */
.cw-publish-card { max-width: 720px; }

.cw-info-box {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.5;
    flex-direction: row !important;
}
.cw-info-box i {
    width: 18px;
    height: 18px;
    color: #60a5fa;
    flex-shrink: 0;
    margin-top: 2px;
}
.cw-info-box span { flex: 1; }
.cw-info-box strong { color: var(--text); font-weight: 700; }
.cw-input .is-spinning { width: 16px; height: 16px; animation: cw-spin 0.8s linear infinite; }
@keyframes cw-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.cw-creatives-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    max-width: 620px;
    margin: 0 auto;
}
.cw-creative-row {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2, rgba(255,255,255,0.02));
}
.cw-creative-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.cw-creative-info strong { font-size: 0.92rem; color: var(--text); }
.cw-creative-hook { font-size: 0.78rem; color: var(--text-muted); font-style: italic; }
.cw-creative-format { font-size: 0.7rem; color: #a78bfa; font-weight: 700; text-transform: uppercase; }
.cw-creative-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.cw-creative-thumb {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--border);
}
.cw-creative-placeholder {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    border: 1.5px dashed var(--border);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    font-size: 0.65rem;
    color: var(--text-muted);
}
.cw-creative-placeholder i { width: 18px; height: 18px; }

.cw-success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 36px rgba(16, 185, 129, 0.4);
}
.cw-success-icon i { width: 38px; height: 38px; color: #fff; }

.cw-error-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #ef4444, #dc2626);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 36px rgba(239, 68, 68, 0.4);
}
.cw-error-icon i { width: 38px; height: 38px; color: #fff; }

.cw-success-stats {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin: 1.5rem auto;
    padding: 1.25rem;
    border-radius: 14px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.2);
    max-width: 420px;
}
.cw-success-stats > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}
.cw-success-stats strong {
    font-size: 1.8rem;
    color: var(--text);
    font-family: 'Playfair Display', Georgia, serif;
}
.cw-success-stats span {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.cw-success-actions {
    display: flex;
    gap: 0.625rem;
    justify-content: center;
    flex-wrap: wrap;
}
.cw-success-actions .pm-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.cw-success-actions a {
    text-decoration: none;
}

/* CW LOADING (overlay full) */
.cw-loading {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.cw-loading.visible {
    display: flex !important;
}

/* ============================================================
   INSPO LAB — Analizador de Anuncios
   ============================================================ */
.inspo-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
}
.inspo-hero {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(99, 102, 241, 0.10));
    border: 1px solid rgba(168, 85, 247, 0.3);
    position: relative;
    overflow: hidden;
}
.inspo-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.25), transparent 70%);
    pointer-events: none;
}
.inspo-hero-icon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 18px;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 36px rgba(168, 85, 247, 0.45);
    position: relative;
    z-index: 1;
}
.inspo-hero-icon i {
    width: 32px;
    height: 32px;
    color: #fff;
}
.inspo-hero-body { flex: 1; min-width: 0; position: relative; z-index: 1; }
.inspo-hero-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem;
    font-family: 'Playfair Display', Georgia, serif;
}
.inspo-hero-sub {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 0 1rem;
    max-width: 700px;
}
.inspo-hero-sub strong { color: var(--text); }

/* Input card */
.inspo-input-card {
    padding: 1.5rem;
    margin-bottom: 1rem;
}
.inspo-paste-area {
    display: flex;
    gap: 0.875rem;
    align-items: center;
    padding: 1rem 1.25rem;
    border: 1.5px dashed rgba(168, 85, 247, 0.4);
    border-radius: 12px;
    background: rgba(168, 85, 247, 0.06);
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: all 0.18s;
}
.inspo-paste-area:hover {
    border-color: rgba(168, 85, 247, 0.7);
    background: rgba(168, 85, 247, 0.1);
}
.inspo-paste-icon {
    width: 22px;
    height: 22px;
    color: #a855f7;
    flex-shrink: 0;
}
.inspo-paste-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}
.inspo-paste-body strong {
    font-size: 0.95rem;
    color: var(--text);
}
.inspo-paste-body span {
    font-size: 0.78rem;
    color: var(--text-muted);
}
.inspo-paste-body code {
    background: rgba(255, 255, 255, 0.06);
    padding: 0.1rem 0.375rem;
    border-radius: 4px;
    font-size: 0.75rem;
    color: var(--text);
}
.inspo-input {
    font-size: 0.92rem;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    transition: border-color 0.15s;
}
.inspo-input.has-value {
    border-color: rgba(168, 85, 247, 0.5);
    background: rgba(168, 85, 247, 0.04);
}

.inspo-client-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: var(--surface-2, rgba(255, 255, 255, 0.03));
    border: 1px solid var(--border);
    border-radius: 8px;
    margin-bottom: 1rem;
    font-size: 0.82rem;
}
.inspo-client-bar i { width: 14px; height: 14px; color: #a78bfa; flex-shrink: 0; }
.inspo-client-label { color: var(--text-muted); }
.inspo-client-value {
    color: var(--text-muted);
    font-style: italic;
    flex: 1;
}
.inspo-client-value.has-value {
    color: var(--text);
    font-weight: 600;
    font-style: normal;
}
.inspo-client-change {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.25rem 0.625rem;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all 0.15s;
}
.inspo-client-change:hover {
    border-color: rgba(168, 85, 247, 0.5);
    background: rgba(168, 85, 247, 0.08);
}

.inspo-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.inspo-analyze-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}
.inspo-analyze-btn i { width: 18px; height: 18px; }

.inspo-help { margin-top: 1rem; }
.inspo-help-list {
    margin: 0.5rem 0 0.75rem 1.25rem;
    padding: 0;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.6;
}
.inspo-help-list a { color: #a78bfa; text-decoration: underline; }
.inspo-help-note {
    font-size: 0.78rem;
    color: var(--text-muted);
    background: rgba(251, 191, 36, 0.08);
    border-left: 3px solid rgba(251, 191, 36, 0.5);
    padding: 0.625rem 0.875rem;
    border-radius: 4px;
    margin: 0.5rem 0 0;
}

/* Results layout */
.inspo-results-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
    gap: 0.5rem;
}
.inspo-result-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 900px) {
    .inspo-result-grid { grid-template-columns: 1fr; }
}

.inspo-card {
    background: var(--surface, rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem;
}
.inspo-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.inspo-card-eyebrow {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.25rem;
}
.inspo-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}

/* Plataformas badges */
.inspo-plats {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.inspo-plat-badge {
    padding: 0.2rem 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    font-size: 0.7rem;
    color: var(--text);
    font-weight: 500;
    text-transform: capitalize;
}

/* Anuncio body */
.inspo-ad-body {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.55;
    padding: 0.875rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    margin-bottom: 0.75rem;
    white-space: pre-wrap;
    max-height: 280px;
    overflow-y: auto;
}
.inspo-ad-meta-row {
    display: flex;
    gap: 0.5rem;
    font-size: 0.8rem;
    margin-bottom: 0.375rem;
    flex-wrap: wrap;
}
.inspo-ad-meta-label {
    color: var(--text-muted);
    font-weight: 600;
    flex-shrink: 0;
}
.inspo-ad-snapshot {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.625rem;
    color: #a78bfa;
    font-size: 0.82rem;
    text-decoration: none;
}
.inspo-ad-snapshot:hover { text-decoration: underline; }
.inspo-ad-snapshot i { width: 14px; height: 14px; }

/* Score total */
.inspo-score-total {
    display: flex;
    align-items: baseline;
    gap: 0.125rem;
    padding: 0.5rem 0.875rem;
    border-radius: 12px;
    font-family: 'Playfair Display', Georgia, serif;
    flex-shrink: 0;
}
.inspo-score-total.is-good { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.inspo-score-total.is-mid { background: rgba(251, 191, 36, 0.15); color: #f59e0b; }
.inspo-score-total.is-low { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.inspo-score-total-num { font-size: 2rem; font-weight: 700; line-height: 1; }
.inspo-score-total-label { font-size: 0.9rem; opacity: 0.7; }

.inspo-section { margin-bottom: 1.25rem; }
.inspo-section:last-child { margin-bottom: 0; }
.inspo-section-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5rem;
}
.inspo-section-label i { width: 14px; height: 14px; }

.inspo-hook-text {
    font-size: 1rem;
    color: var(--text);
    line-height: 1.5;
    padding: 0.875rem 1rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.10), rgba(251, 191, 36, 0.04));
    border-left: 3px solid #fbbf24;
    border-radius: 6px;
    font-style: italic;
    margin-bottom: 0.5rem;
}
.inspo-hook-meta {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
}
.inspo-tag {
    display: inline-block;
    padding: 0.25rem 0.625rem;
    border-radius: 100px;
    font-size: 0.72rem;
    font-weight: 700;
}
.inspo-tag-tipo {
    background: rgba(168, 85, 247, 0.18);
    color: #c4b5fd;
}
.inspo-hook-why {
    font-size: 0.82rem;
    color: var(--text-muted);
    flex: 1;
    min-width: 0;
}

.inspo-estructura-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.45;
}
@media (max-width: 600px) {
    .inspo-estructura-grid { grid-template-columns: 1fr; }
}
.inspo-estructura-grid strong { color: var(--text-muted); font-weight: 600; }

.inspo-section-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}
@media (max-width: 600px) {
    .inspo-section-row { grid-template-columns: 1fr; }
}
.inspo-pill {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2, rgba(255, 255, 255, 0.02));
}
.inspo-pill > i {
    width: 18px;
    height: 18px;
    color: #a78bfa;
    flex-shrink: 0;
    margin-top: 1px;
}
.inspo-pill > div {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.inspo-pill span {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.inspo-pill strong {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.35;
}

.inspo-buyer-detail {
    padding: 0.625rem 0.875rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    font-size: 0.82rem;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.inspo-buyer-detail strong { color: var(--text-muted); font-weight: 600; }

/* Score bars */
.inspo-scores {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.inspo-score-row {
    display: grid;
    grid-template-columns: 130px 1fr 50px;
    gap: 0.625rem;
    align-items: center;
    font-size: 0.78rem;
}
.inspo-score-label { color: var(--text); }
.inspo-score-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    overflow: hidden;
}
.inspo-score-fill {
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #6366f1);
    border-radius: 100px;
    transition: width 0.4s ease;
}
.inspo-score-num {
    color: var(--text-muted);
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.inspo-pros, .inspo-cons {
    padding: 0.875rem;
    border-radius: 10px;
    background: var(--surface-2, rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border);
}
.inspo-pros ul, .inspo-cons ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.inspo-pros li, .inspo-cons li {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text);
    padding-left: 0.875rem;
    position: relative;
}
.inspo-pros li::before { content: '+'; position: absolute; left: 0; color: #10b981; font-weight: 700; }
.inspo-cons li::before { content: '−'; position: absolute; left: 0; color: #ef4444; font-weight: 700; }
.inspo-empty { color: var(--text-muted); font-style: italic; }

/* Ideas adaptadas */
.inspo-ideas-section {
    background: var(--surface, rgba(255, 255, 255, 0.02));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
}
.inspo-ideas-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 1rem;
}
.inspo-ideas-title i { width: 20px; height: 20px; color: #a855f7; }

.inspo-ideas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.875rem;
}
.inspo-idea-card {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    background: var(--surface-2, rgba(255, 255, 255, 0.02));
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    transition: all 0.18s;
}
.inspo-idea-card:hover {
    border-color: rgba(168, 85, 247, 0.4);
    transform: translateY(-2px);
}
.inspo-idea-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.inspo-idea-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.inspo-idea-angulo {
    font-size: 0.78rem;
    font-weight: 600;
    color: #c4b5fd;
}
.inspo-idea-hook {
    display: flex;
    gap: 0.375rem;
    align-items: flex-start;
    font-size: 0.92rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--text);
}
.inspo-idea-hook i {
    width: 14px;
    height: 14px;
    color: #fbbf24;
    flex-shrink: 0;
    margin-top: 4px;
}
.inspo-idea-guion {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.inspo-idea-why {
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.5rem 0.625rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 6px;
    line-height: 1.4;
}
.inspo-idea-actions {
    display: flex;
    gap: 0.375rem;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

/* Pick grid: lista de ads para que el user elija uno a analizar */
.inspo-results-summary {
    font-size: 0.78rem;
    color: var(--text-muted);
    align-self: center;
}
.inspo-pick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 0.875rem;
}
.inspo-pick-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface, rgba(255, 255, 255, 0.02));
    cursor: pointer;
    transition: all 0.18s;
}
.inspo-pick-card:hover {
    border-color: rgba(168, 85, 247, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(168, 85, 247, 0.12);
}
.inspo-pick-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.inspo-pick-page {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
}
.inspo-pick-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.inspo-pick-plats {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.inspo-pick-body {
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.5;
    padding: 0.625rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    flex: 1;
    max-height: 140px;
    overflow: hidden;
    position: relative;
}
.inspo-pick-body em {
    color: var(--text-muted);
    font-style: italic;
}
.inspo-pick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
}
.inspo-pick-btn i { width: 14px; height: 14px; }

.inspo-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    border: 1.5px dashed var(--border);
    border-radius: 14px;
    background: var(--surface-2, rgba(255, 255, 255, 0.02));
}
.inspo-empty > i {
    width: 36px;
    height: 36px;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
}
.inspo-empty strong {
    display: block;
    font-size: 1rem;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.inspo-empty p {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 460px;
    margin: 0 auto;
}
.inspo-empty code {
    background: rgba(255, 255, 255, 0.06);
    padding: 0.1rem 0.375rem;
    border-radius: 4px;
    font-size: 0.78rem;
    color: var(--text);
}

/* ============================================================
   INVESTIGADOR — Fase 1: Candidate Cards (UX Pro Max)
   ============================================================ */
.inv-candidates {
    margin-top: 1rem;
}
.inv-candidates-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.inv-candidates-title {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    font-family: 'Playfair Display', Georgia, serif;
}
.inv-candidates-title strong { color: #c4b5fd; }
.inv-candidates-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    max-width: 580px;
    line-height: 1.5;
}

.inv-candidates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.inv-cand-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: var(--surface, rgba(255, 255, 255, 0.02));
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.2, 0.9, 0.3, 1);
    position: relative;
    overflow: hidden;
}
.inv-cand-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0), rgba(99, 102, 241, 0));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: background 0.22s;
}
.inv-cand-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(168, 85, 247, 0.18);
}
.inv-cand-card:hover::before {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.6), rgba(99, 102, 241, 0.4));
}

.inv-cand-emoji {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.18), rgba(99, 102, 241, 0.10));
    border: 1px solid rgba(168, 85, 247, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    line-height: 1;
}

.inv-cand-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}

.inv-cand-perfil {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.inv-cand-section {
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--border);
}
.inv-cand-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0.375rem;
}
.inv-cand-label i {
    width: 13px;
    height: 13px;
    color: #a78bfa;
}
.inv-cand-why {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.5;
}

.inv-cand-meta {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
}
.inv-cand-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.78rem;
}
.inv-cand-meta-label {
    color: var(--text-muted);
    font-weight: 500;
}
.inv-cand-badge {
    padding: 0.125rem 0.5rem;
    border-radius: 100px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.inv-cand-badge.is-high { background: rgba(16, 185, 129, 0.15); color: #10b981; }
.inv-cand-badge.is-mid  { background: rgba(251, 191, 36, 0.15); color: #f59e0b; }
.inv-cand-badge.is-low  { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

.inv-cand-btn {
    margin-top: auto;
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.88rem;
    font-weight: 600;
}
.inv-cand-btn i { width: 16px; height: 16px; }

/* ============================================================
   INVESTIGADOR — Fase 2: Deep Dive (UX Pro Max)
   ============================================================ */
.inv-deep {
    margin-top: 1rem;
}
.inv-deep-header {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--bg, transparent);
    padding: 0.5rem 0;
}

.inv-deep-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.16), rgba(99, 102, 241, 0.10));
    border: 1px solid rgba(168, 85, 247, 0.3);
    position: relative;
    overflow: hidden;
}
.inv-deep-hero::before {
    content: '';
    position: absolute;
    top: -30%;
    right: -10%;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.25), transparent 70%);
    pointer-events: none;
}
.inv-deep-avatar {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: 22px;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    box-shadow: 0 14px 36px rgba(168, 85, 247, 0.45);
    position: relative;
    z-index: 1;
}
.inv-deep-hero-body {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}
.inv-deep-name {
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text);
    font-family: 'Playfair Display', Georgia, serif;
    line-height: 1.2;
}
.inv-deep-perfil {
    margin: 0;
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 720px;
}

/* Grid de secciones del deep dive */
.inv-deep-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (max-width: 800px) {
    .inv-deep-grid { grid-template-columns: 1fr; }
}

.inv-deep-section {
    padding: 1.25rem;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface, rgba(255, 255, 255, 0.02));
    transition: border-color 0.18s;
}
.inv-deep-section:hover {
    border-color: rgba(168, 85, 247, 0.3);
}
.inv-deep-section-wide {
    grid-column: 1 / -1;
}
.inv-deep-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.875rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}
.inv-deep-section-title i {
    width: 18px;
    height: 18px;
    color: #a78bfa;
}
.inv-deep-color-good { color: #10b981 !important; }
.inv-deep-color-good i { color: #10b981 !important; }
.inv-deep-color-warn { color: #f59e0b !important; }
.inv-deep-color-warn i { color: #f59e0b !important; }

.inv-deep-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.inv-deep-list li {
    padding-left: 1rem;
    position: relative;
    line-height: 1.5;
    font-size: 0.88rem;
    color: var(--text);
}
.inv-deep-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #a78bfa;
    font-weight: 700;
}
.inv-deep-list li strong {
    display: block;
    color: var(--text);
    font-weight: 600;
}
.inv-deep-meta {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.45;
    font-weight: 400;
}

.inv-deep-quote {
    margin: 0.5rem 0 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid rgba(251, 191, 36, 0.7);
    background: rgba(251, 191, 36, 0.08);
    border-radius: 4px;
    font-size: 0.82rem;
    color: var(--text);
    font-style: italic;
    line-height: 1.45;
}

/* Errores típicos */
.inv-deep-errors {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.inv-deep-error-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: 10px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.18);
}
@media (max-width: 700px) { .inv-deep-error-row { grid-template-columns: 1fr; } }
.inv-deep-error-row > div p {
    margin: 0;
    font-size: 0.83rem;
    color: var(--text);
    line-height: 1.45;
}
.inv-deep-error-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

/* Comportamiento de compra */
.inv-deep-compra-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
@media (max-width: 700px) { .inv-deep-compra-grid { grid-template-columns: 1fr; } }
.inv-deep-compra-grid > div {
    padding: 0.75rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid var(--border);
}
.inv-deep-compra-grid strong {
    display: block;
    font-size: 0.88rem;
    color: var(--text);
    font-weight: 600;
    line-height: 1.4;
}
.inv-deep-meta-label {
    display: block;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    font-weight: 700;
    margin-bottom: 0.375rem;
}
.inv-deep-compra-lists {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 700px) { .inv-deep-compra-lists { grid-template-columns: 1fr; } }

/* Motivadores de confianza */
.inv-deep-motivadores {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.inv-deep-motivador {
    display: flex;
    gap: 0.75rem;
    padding: 0.875rem;
    border-radius: 10px;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
}
.inv-deep-motivador-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981, #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4);
}
.inv-deep-motivador-icon i {
    width: 14px;
    height: 14px;
    color: #fff;
}
.inv-deep-motivador strong {
    display: block;
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
    line-height: 1.4;
}
.inv-deep-motivador span {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
}

/* Idioma propio (chips) */
.inv-deep-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.inv-deep-chip {
    padding: 0.4rem 0.75rem;
    border-radius: 100px;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.25);
    color: var(--text);
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.3;
}

/* Hooks anclados */
.inv-deep-hooks {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.inv-deep-hook {
    padding: 0.875rem 1rem;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.10), rgba(251, 191, 36, 0.04));
    border-left: 3px solid #fbbf24;
}
.inv-deep-hook-text {
    font-size: 0.95rem;
    color: var(--text);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    font-style: italic;
}
.inv-deep-hook-meta {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
}
.inv-deep-hook-angulo {
    padding: 0.2rem 0.5rem;
    background: rgba(251, 191, 36, 0.18);
    color: #f59e0b;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
}
.inv-deep-hook-why {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}

/* CTA footer: 3 botones para llevar la persona al siguiente generador */
.inv-deep-cta {
    margin-top: 1.5rem;
    padding: 1.5rem;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(99, 102, 241, 0.04));
    border: 1px solid rgba(168, 85, 247, 0.25);
}
.inv-deep-cta-head {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    margin-bottom: 1.25rem;
}
.inv-deep-cta-head > i {
    width: 22px;
    height: 22px;
    color: #a78bfa;
    flex-shrink: 0;
    margin-top: 2px;
}
.inv-deep-cta-head > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.inv-deep-cta-head strong {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}
.inv-deep-cta-head span {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.inv-deep-cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
@media (max-width: 800px) { .inv-deep-cta-grid { grid-template-columns: 1fr; } }

.inv-deep-cta-btn {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface, rgba(255, 255, 255, 0.03));
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.inv-deep-cta-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 10px 24px rgba(168, 85, 247, 0.18);
}
.inv-deep-cta-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.inv-deep-cta-icon i {
    width: 20px;
    height: 20px;
    color: #fff;
}
.inv-deep-cta-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.inv-deep-cta-body strong {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.inv-deep-cta-body span {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.inv-deep-cta-arrow {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.18s, color 0.18s;
}
.inv-deep-cta-btn:hover .inv-deep-cta-arrow {
    transform: translateX(3px);
    color: #a78bfa;
}

/* Saved section title con icono */
.inv-saved-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.inv-saved-title i {
    width: 18px;
    height: 18px;
    color: #a78bfa;
}

@media (max-width: 720px) {
    .inv-hero {
        flex-direction: column;
        gap: 0.875rem;
        padding: 1.25rem;
    }
    .inv-hero-title { font-size: 1.2rem; }
    .inv-form-actions { flex-direction: column; align-items: stretch; }
    .inv-generate-btn { justify-content: center; }
}

.inv-form-card { padding: 1.25rem; }
.inv-form-card .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.inv-form-card .full-width { grid-column: 1 / -1; }

.inv-usage {
    margin-left: 1rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Lista de personas guardadas (parte superior) */
.inv-saved-section {
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
}
.inv-saved-title {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
    font-weight: 600;
}
.inv-saved-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.6rem;
}
.inv-saved-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 0.75rem;
    transition: border-color 0.15s;
}
.inv-saved-card:hover { border-color: var(--accent); }
.inv-saved-card-name { font-weight: 600; font-size: 0.88rem; color: var(--text); }
.inv-saved-card-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.inv-saved-card-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.6rem;
}
.inv-saved-btn {
    font-size: 0.72rem;
    padding: 0.3rem 0.6rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
}
.inv-saved-btn:hover { border-color: var(--accent); color: var(--text); }
.inv-saved-btn.delete:hover { border-color: var(--red); color: var(--red); }

/* Resultados: 2 cards de buyer persona */
.inv-results { margin-top: 1.25rem; }
.inv-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.inv-personas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 1050px) { .inv-personas-grid { grid-template-columns: 1fr; } }

.inv-persona-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.95rem;
}
.inv-persona-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.inv-persona-num {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    background: rgba(124, 92, 252, 0.12);
    padding: 0.3rem 0.7rem;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.inv-persona-save {
    background: transparent;
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: var(--green, #34d399);
    border-radius: 8px;
    padding: 0.35rem 0.8rem;
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.15s;
}
.inv-persona-save:hover {
    background: rgba(52, 211, 153, 0.12);
    border-color: var(--green, #34d399);
}
.inv-persona-save.saved {
    background: rgba(52, 211, 153, 0.2);
    cursor: default;
}
.inv-persona-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
}
.inv-persona-profile {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.inv-section {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.inv-section-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.inv-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.5;
}
.inv-list li { margin-bottom: 0.3rem; }
.inv-list li::marker { color: var(--accent); }

.inv-triple-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.75rem;
    background: rgba(255,255,255,0.02);
    border-radius: 10px;
    padding: 0.85rem;
}
.inv-section-sm .inv-section-label { font-size: 0.62rem; }
.inv-section-sm .inv-list {
    font-size: 0.78rem;
    padding-left: 0.9rem;
}

/* Vinculos beneficio <-> pain */
.inv-vinculos {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.inv-vinculo-item {
    background: rgba(124, 92, 252, 0.05);
    border: 1px solid rgba(124, 92, 252, 0.2);
    border-radius: 10px;
    padding: 0.7rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.inv-vinculo-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.4;
}
.inv-vinculo-tag {
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 5px;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 0.1rem;
    flex-shrink: 0;
}
.inv-tag-benefit { background: rgba(52, 211, 153, 0.15); color: var(--green); }
.inv-tag-pain { background: rgba(248, 113, 113, 0.15); color: var(--red); }
.inv-vinculo-bridge {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-style: italic;
    padding: 0.4rem 0.6rem;
    background: rgba(255,255,255,0.03);
    border-radius: 6px;
    line-height: 1.45;
}

/* Angulos chips */
.inv-angulos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.inv-angulo-chip {
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.14), rgba(96, 165, 250, 0.1));
    border: 1px solid rgba(124, 92, 252, 0.3);
    color: var(--text);
    font-size: 0.82rem;
    padding: 0.45rem 0.8rem;
    border-radius: 20px;
    line-height: 1.3;
}

/* Estructuras A y B */
.inv-struct {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.5;
    padding: 0.8rem 0.95rem;
    background: rgba(255,255,255,0.02);
    border-radius: 8px;
}
.inv-struct strong {
    color: var(--accent);
    font-weight: 600;
    margin-right: 0.3rem;
}

/* Hooks estrategicos */
.inv-hooks {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.inv-hook-item {
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.06), rgba(96, 165, 250, 0.04));
    border-left: 3px solid var(--accent);
    border-radius: 6px;
    padding: 0.65rem 0.85rem;
}
.inv-hook-formula {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 0.3rem;
}
.inv-hook-texto {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.45;
    font-weight: 500;
}

/* =============================================
   IDEAS GENERATOR - TIPO DE ANUNCIO & RESULT CARDS
   ============================================= */

/* Tipo de anuncio badge */
.tipo-nivel-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    background: rgba(124, 92, 252, 0.14);
    color: var(--accent);
    padding: 0.15rem 0.55rem;
    border-radius: 8px;
    margin-left: 0.5rem;
    vertical-align: middle;
}

/* Result: 2 cards side-by-side */
.ideas-pairs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-top: 0.5rem;
}
@media (max-width: 900px) {
    .ideas-pairs-grid { grid-template-columns: 1fr; }
}

.ideas-pair-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    transition: opacity 0.2s, border-color 0.2s;
}
.ideas-pair-card.regenerating {
    opacity: 0.55;
    pointer-events: none;
}
.ideas-pair-card:hover {
    border-color: rgba(124, 92, 252, 0.35);
}

.ideas-pair-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.ideas-pair-num {
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--accent-soft);
    padding: 0.3rem 0.65rem;
    border-radius: 6px;
    flex-shrink: 0;
}
.ideas-pair-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    flex: 1;
    min-width: 0;
}
.ideas-pair-header-actions {
    display: flex;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* Chips de contexto (nivel, tipo, angulo) */
.ideas-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.22rem 0.55rem;
    border-radius: 12px;
    border: 1px solid transparent;
    line-height: 1.3;
}
.ideas-chip span { font-size: 0.85rem; line-height: 1; }

/* Nivel chip */
.ideas-chip-nivel.nivel-frio {
    background: rgba(96, 165, 250, 0.14);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.3);
}
.ideas-chip-nivel.nivel-tibio {
    background: rgba(251, 191, 36, 0.14);
    color: #fcd34d;
    border-color: rgba(251, 191, 36, 0.3);
}
.ideas-chip-nivel.nivel-caliente {
    background: rgba(248, 113, 113, 0.14);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.3);
}

/* Tipo chip neutro */
.ideas-chip-tipo {
    background: var(--surface-2);
    color: var(--text-muted);
    border-color: var(--border);
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Angulo chip por color psicológico */
.ideas-chip-angulo.angulo-default {
    background: rgba(255,255,255,0.05);
    color: var(--text-muted);
}
.ideas-chip-angulo.angulo-dolor {
    background: rgba(248, 113, 113, 0.15);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, 0.3);
}
.ideas-chip-angulo.angulo-curiosidad {
    background: rgba(96, 165, 250, 0.15);
    color: #93c5fd;
    border-color: rgba(96, 165, 250, 0.3);
}
.ideas-chip-angulo.angulo-prueba {
    background: rgba(52, 211, 153, 0.15);
    color: #6ee7b7;
    border-color: rgba(52, 211, 153, 0.3);
}
.ideas-chip-angulo.angulo-autoridad {
    background: rgba(251, 191, 36, 0.15);
    color: #fcd34d;
    border-color: rgba(251, 191, 36, 0.3);
}
.ideas-chip-angulo.angulo-aspiracion {
    background: rgba(167, 139, 250, 0.15);
    color: #c4b5fd;
    border-color: rgba(167, 139, 250, 0.3);
}

/* Legacy — mantengo por compat */
.ideas-pair-angulo {
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-muted);
    background: rgba(255,255,255,0.04);
    padding: 0.25rem 0.6rem;
    border-radius: 6px;
}
.ideas-pair-save {
    margin-left: auto;
    background: transparent;
    border: 1px solid rgba(52, 211, 153, 0.35);
    color: var(--green, #34d399);
    border-radius: 8px;
    padding: 0.35rem 0.8rem;
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.15s;
}
.ideas-pair-save:hover {
    background: rgba(52, 211, 153, 0.12);
    border-color: var(--green, #34d399);
}
.ideas-pair-save.saved {
    background: rgba(52, 211, 153, 0.2);
    border-color: var(--green, #34d399);
    cursor: default;
}
.ideas-save-icon { font-size: 0.95rem; }

.ideas-pair-regen {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    border-radius: 8px;
    padding: 0.35rem 0.8rem;
    font-size: 0.78rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.15s;
}
.ideas-pair-regen:hover:not(:disabled) {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(124, 92, 252, 0.08);
}
.ideas-pair-regen:disabled {
    opacity: 0.6;
    cursor: default;
}
.ideas-regen-icon { font-size: 1rem; }
.ideas-regen-spinner {
    display: inline-block;
    width: 11px;
    height: 11px;
    border: 2px solid rgba(124, 92, 252, 0.3);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: ideasSpin 0.7s linear infinite;
}
@keyframes ideasSpin { to { transform: rotate(360deg); } }

.ideas-pair-section {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 0.75rem;
}
.ideas-pair-section:first-of-type {
    border-top: none;
    padding-top: 0;
}
.ideas-pair-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.ideas-pair-label svg { width: 12px; height: 12px; }

.ideas-pair-hook {
    font-size: 1.02rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    padding: 0.6rem 0.9rem;
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.08), rgba(96, 165, 250, 0.06));
    border-left: 3px solid var(--accent);
    border-radius: 6px;
}

/* Hook como quote hero */
.ideas-pair-hook-section {
    padding-top: 0.5rem !important;
}
.ideas-hook-quote {
    position: relative;
    padding: 1.1rem 1.5rem;
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.12), rgba(96, 165, 250, 0.08));
    border: 1px solid rgba(124, 92, 252, 0.25);
    border-radius: 12px;
    overflow: visible;
}
.ideas-hook-mark-open,
.ideas-hook-mark-close {
    position: absolute;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 3.5rem;
    font-weight: 900;
    color: var(--accent);
    opacity: 0.35;
    line-height: 1;
    pointer-events: none;
}
.ideas-hook-mark-open {
    top: -0.2rem;
    left: 0.3rem;
}
.ideas-hook-mark-close {
    bottom: -1.5rem;
    right: 0.5rem;
}
.ideas-hook-text {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    letter-spacing: -0.2px;
    position: relative;
    z-index: 1;
    padding: 0.15rem 0.5rem;
}

/* Por qué funciona dropdown */
.ideas-porque-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.35rem 0.75rem;
    border-radius: 18px;
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    margin-top: 0.7rem;
    transition: all 0.15s;
    font-family: inherit;
}
.ideas-porque-toggle svg:first-child { width: 13px; height: 13px; color: var(--accent); }
.ideas-porque-toggle .ideas-porque-chevron {
    width: 12px;
    height: 12px;
    transition: transform 0.2s;
}
.ideas-porque-toggle.expanded {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: rgba(124, 92, 252, 0.3);
}
.ideas-porque-toggle.expanded .ideas-porque-chevron {
    transform: rotate(180deg);
}
.ideas-porque-toggle:hover { color: var(--text); border-color: var(--border-strong); }

.ideas-porque-dropdown {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, margin-top 0.2s ease;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.55;
    font-style: italic;
}
.ideas-porque-dropdown.expanded {
    max-height: 400px;
    margin-top: 0.65rem;
    padding: 0.8rem 1rem;
    background: rgba(124, 92, 252, 0.06);
    border-left: 3px solid var(--accent);
    border-radius: 0 8px 8px 0;
}
.ideas-pair-guion {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.6;
}
.ideas-pair-guion p { margin: 0.4rem 0; }
.ideas-pair-guion p:first-child { margin-top: 0; }
.ideas-pair-guion p:last-child { margin-bottom: 0; }
.ideas-pair-guion strong {
    color: var(--accent);
    font-weight: 600;
}
.ideas-pair-porque {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.55;
    padding: 0.6rem 0.85rem;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    font-style: italic;
}

/* Rating 1-5 stars */
.ideas-pair-rating {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.ideas-rating-label {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}
.ideas-stars {
    display: inline-flex;
    gap: 0.15rem;
}
.ideas-star {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.18);
    font-size: 1.35rem;
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.15s, transform 0.1s;
    line-height: 1;
}
.ideas-star:hover {
    color: var(--yellow, #fbbf24);
    transform: scale(1.15);
}
.ideas-stars:hover .ideas-star:hover ~ .ideas-star {
    color: rgba(255,255,255,0.18);
}
.ideas-star.active {
    color: var(--yellow, #fbbf24);
}
.ideas-rating-feedback {
    font-size: 0.75rem;
    color: var(--green, #34d399);
    margin-left: 0.2rem;
    font-weight: 500;
}

/* Psicologia section */
.ideas-psicologia {
    margin-top: 1.25rem;
    padding: 1rem 1.2rem;
    background: rgba(124, 92, 252, 0.06);
    border: 1px solid rgba(124, 92, 252, 0.18);
    border-radius: 10px;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text);
}
.ideas-psicologia strong {
    color: var(--accent);
    display: block;
    margin-bottom: 0.3rem;
}

/* =============================================
   APP NOTIFICATIONS MODAL
   ============================================= */
.app-notif-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: notifFadeIn 0.3s ease;
}
.app-notif-overlay.hidden { display: none; }
@keyframes notifFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.app-notif-modal {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 100%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    position: relative;
    animation: notifSlideUp 0.3s ease;
}
@keyframes notifSlideUp {
    from { transform: translateY(30px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.app-notif-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    background: rgba(255,255,255,0.08);
    border: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    z-index: 1;
}
.app-notif-close:hover { background: rgba(255,255,255,0.15); color: var(--text); }
.app-notif-content {
    padding: 1.8rem 1.5rem 1rem;
}
.app-notif-type-badge {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.2rem 0.6rem;
    border-radius: 6px;
    margin-bottom: 0.7rem;
    letter-spacing: 0.5px;
}
.app-notif-type-info { background: rgba(96,165,250,0.15); color: #60a5fa; }
.app-notif-type-evento { background: rgba(124,92,252,0.15); color: #7c5cfc; }
.app-notif-type-promo { background: rgba(251,191,36,0.15); color: #fbbf24; }
.app-notif-type-alerta { background: rgba(248,113,113,0.15); color: #f87171; }

.app-notif-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}
.app-notif-message {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 1rem;
    white-space: pre-line;
}
.app-notif-image {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 1rem;
    max-height: 200px;
    object-fit: cover;
}
.app-notif-cta {
    display: inline-block;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
    margin-bottom: 0.5rem;
}
.app-notif-cta:hover { opacity: 0.85; }
.app-notif-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1.5rem;
    border-top: 1px solid var(--border);
}
.app-notif-prev,
.app-notif-next {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}
.app-notif-prev:hover,
.app-notif-next:hover { color: var(--text); border-color: var(--accent); }
.app-notif-prev:disabled,
.app-notif-next:disabled { opacity: 0.3; cursor: default; }
.app-notif-counter {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* =============================================
   TOP BAR (header simplificado)
   ============================================= */
.app-topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 50;
}
.app-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.7rem 1.5rem;
    gap: 1rem;
    max-width: 100%;
}
.app-topbar-left,
.app-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.app-topbar-center {
    flex: 1;
    text-align: center;
    overflow: hidden;
}
.app-topbar-module {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.2px;
}
/* Contexto Mi Negocio - CTA discreto */
.app-topbar-ctx {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--accent-soft);
    border: 1px solid rgba(124, 92, 252, 0.25);
    color: var(--accent);
    font-size: 0.82rem;
    font-weight: 600;
    padding: 0.45rem 0.85rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.15s;
}
.app-topbar-ctx:hover {
    background: rgba(124, 92, 252, 0.18);
    border-color: var(--accent);
}
.app-topbar-ctx svg { width: 16px; height: 16px; }
.app-topbar-ctx-badge {
    background: var(--accent);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Icon button */
.app-topbar-iconbtn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: all 0.15s;
}
.app-topbar-iconbtn:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-2);
}
.app-topbar-iconbtn svg { width: 17px; height: 17px; }
.app-topbar-notif-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    background: var(--danger);
    border-radius: 50%;
    border: 2px solid var(--surface);
}

/* User menu */
.app-topbar-user { position: relative; }
.app-topbar-userbtn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.82rem;
    padding: 0.35rem 0.65rem 0.35rem 0.35rem;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
}
.app-topbar-userbtn:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}
.app-topbar-userbtn svg { width: 14px; height: 14px; color: var(--text-muted); }
.app-topbar-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), #9333ea);
    color: #fff;
    font-weight: 700;
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.app-topbar-avatar-lg {
    width: 42px;
    height: 42px;
    font-size: 1rem;
}
.app-topbar-username {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* User menu dropdown */
.app-topbar-usermenu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.5rem;
    min-width: 260px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    animation: topbarFadeIn 0.15s ease;
}
.app-topbar-usermenu[hidden] { display: none; }
@keyframes topbarFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.app-topbar-usermenu-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.6rem;
}
.app-topbar-usermenu-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.88rem;
}
.app-topbar-usermenu-email {
    color: var(--text-muted);
    font-size: 0.75rem;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.app-topbar-usermenu-divider {
    height: 1px;
    background: var(--border);
    margin: 0.4rem 0.4rem;
}
.app-topbar-usermenu-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.83rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s;
    font-family: inherit;
    text-decoration: none;
}
.app-topbar-usermenu-item:hover { background: var(--surface-2); }
.app-topbar-usermenu-item svg {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.app-topbar-usermenu-item.app-topbar-usermenu-danger { color: var(--danger); }
.app-topbar-usermenu-item.app-topbar-usermenu-danger svg { color: var(--danger); }
.app-topbar-usermenu-item.app-topbar-usermenu-danger:hover { background: var(--danger-soft); }

/* Mobile */
@media (max-width: 700px) {
    .app-topbar-username { display: none; }
    .app-topbar-ctx-label { display: none; }
    .app-topbar-ctx-badge { display: none; }
    .app-topbar-inner { padding: 0.6rem 1rem; }
    .app-topbar-module { font-size: 0.85rem; }
}

/* Hide old pro-header styles cuando existe el nuevo topbar */
.app-topbar ~ .pro-header { display: none !important; }

/* =============================================
   DASHBOARD HOME
   ============================================= */
.home-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 2rem 4rem;
}
.home-header {
    margin-bottom: 2rem;
}
.home-greeting {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    letter-spacing: -0.3px;
}
.home-subtitle {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Stats grid */
.home-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}
@media (max-width: 900px) { .home-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .home-stats { grid-template-columns: 1fr; } }

.home-stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.2rem;
    transition: border-color 0.15s, transform 0.15s;
}
.home-stat-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}
.home-stat-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}
.home-stat-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.home-stat-icon svg { width: 17px; height: 17px; }
.home-stat-icon-ideas { background: rgba(124, 92, 252, 0.15); color: var(--accent); }
.home-stat-icon-image { background: rgba(244, 114, 182, 0.15); color: var(--pink); }
.home-stat-icon-video { background: rgba(251, 146, 60, 0.15); color: var(--orange); }
.home-stat-icon-msg { background: rgba(52, 211, 153, 0.15); color: var(--success); }
.home-stat-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.home-stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 0.6rem;
    letter-spacing: -0.5px;
}
.home-stat-limit {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-subtle);
    margin-left: 0.2rem;
}
.home-stat-bar {
    height: 4px;
    background: var(--surface-2);
    border-radius: 2px;
    overflow: hidden;
}
.home-stat-bar-fill {
    height: 100%;
    background: var(--accent);
    border-radius: 2px;
    transition: width 0.4s ease;
}

/* Grid de 2 columnas */
.home-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .home-grid { grid-template-columns: 1fr; } }

.home-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.3rem;
}
.home-card-header {
    margin-bottom: 1rem;
}
.home-card-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0.1px;
}
.home-card-header h3 svg {
    width: 16px;
    height: 16px;
    color: var(--accent);
}

/* Quick actions */
.home-quick-actions {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}
.home-quick-action {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.9rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
    width: 100%;
    font-family: inherit;
}
.home-quick-action:hover {
    background: var(--surface-3);
    border-color: var(--accent);
    transform: translateX(2px);
}
.home-qa-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.home-qa-icon svg { width: 18px; height: 18px; }
.home-qa-icon-library {
    background: rgba(52, 211, 153, 0.15) !important;
    color: var(--success) !important;
}
.home-qa-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}
.home-qa-text strong {
    font-size: 0.88rem;
    font-weight: 600;
}
.home-qa-text span {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.home-qa-arrow {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.15s;
}
.home-quick-action:hover .home-qa-arrow {
    color: var(--accent);
    transform: translateX(3px);
}

/* Activity */
.home-activity {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.home-activity-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
}
.home-activity-empty svg {
    width: 28px;
    height: 28px;
    color: var(--accent);
    margin-bottom: 0.7rem;
}
.home-activity-empty p {
    font-size: 0.85rem;
    line-height: 1.5;
}
.home-activity-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.75rem;
    border-radius: var(--radius-md);
    transition: background 0.12s;
    cursor: pointer;
}
.home-activity-item:hover { background: var(--surface-2); }
.home-activity-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.home-activity-item-icon svg { width: 15px; height: 15px; }
.home-activity-item-text {
    flex: 1;
    min-width: 0;
}
.home-activity-item-title {
    font-size: 0.83rem;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.home-activity-item-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}

/* Tip */
.home-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1rem 1.2rem;
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.08), rgba(96, 165, 250, 0.05));
    border: 1px solid rgba(124, 92, 252, 0.25);
    border-radius: var(--radius-lg);
}
.home-tip-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.home-tip-icon svg { width: 15px; height: 15px; }
.home-tip-text {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text);
}
.home-tip-text strong {
    color: var(--accent);
    font-weight: 600;
}

/* =============================================
   RESULTS HEADER V2 (Ideas de Anuncios output)
   ============================================= */
.results-header-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.85rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
}
.results-header-left { flex: 1; min-width: 200px; }
.results-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
    color: var(--text);
    letter-spacing: -0.2px;
}
.results-header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Grupo "Convertir a:" — primario */
.results-flow-group {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem 0.25rem 0.85rem;
    background: var(--accent-soft);
    border: 1px solid rgba(124, 92, 252, 0.25);
    border-radius: 24px;
}
.results-group-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-right: 0.25rem;
}
.results-flow-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 0.4rem 0.85rem;
    border-radius: 18px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.results-flow-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-accent);
}
.results-flow-btn svg { width: 14px; height: 14px; }

/* Exportar dropdown */
.results-export-wrap { position: relative; }
.results-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
    padding: 0.5rem 0.85rem;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.results-export-btn:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
}
.results-export-btn svg { width: 14px; height: 14px; }
.results-export-btn svg:last-child {
    width: 12px;
    height: 12px;
    color: var(--text-muted);
}
.results-export-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.35rem;
    min-width: 200px;
    box-shadow: var(--shadow-lg);
    z-index: 50;
    animation: topbarFadeIn 0.15s ease;
}
.results-export-menu[hidden] { display: none; }
.results-export-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.83rem;
    padding: 0.55rem 0.7rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background 0.12s;
    font-family: inherit;
}
.results-export-item:hover { background: var(--surface-2); }
.results-export-item svg {
    width: 15px;
    height: 15px;
    color: var(--text-muted);
}

/* Nueva búsqueda como link */
.results-new-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    color: var(--text-muted);
    border: none;
    padding: 0.5rem 0.5rem;
    font-size: 0.82rem;
    cursor: pointer;
    transition: color 0.15s;
    font-family: inherit;
}
.results-new-link:hover { color: var(--text); }
.results-new-link svg { width: 14px; height: 14px; }

/* Responsive: móvil apila */
@media (max-width: 720px) {
    .results-header-v2 { flex-direction: column; align-items: stretch; }
    .results-header-right { justify-content: center; }
    .results-group-label { display: none; }
}

/* =============================================
   WIZARD MODAL (Nueva campaña Meta Ads)
   ============================================= */
.wizard-overlay {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: fixed;
    inset: 0;
}
.wizard-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 900px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

/* Header */
.wizard-header {
    padding: 1.25rem 1.5rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}
.wizard-title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.2rem 0;
}
.wizard-title svg { width: 20px; height: 20px; color: var(--accent); }
.wizard-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
}
.wizard-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    transition: all 0.15s;
}
.wizard-close:hover { background: var(--surface-2); color: var(--text); }

/* Stepper */
.wizard-stepper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.wizard-step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.wizard-step.done,
.wizard-step.active { opacity: 1; }
.wizard-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    border: 1.5px solid var(--border);
    transition: all 0.2s;
}
.wizard-step.active .wizard-step-num {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.wizard-step.done .wizard-step-num {
    background: var(--success);
    color: #fff;
    border-color: var(--success);
}
.wizard-step.done .wizard-step-num::after { content: '✓'; }
.wizard-step.done .wizard-step-num { font-size: 0; }
.wizard-step.done .wizard-step-num::after { font-size: 0.85rem; }
.wizard-step-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-weight: 500;
}
.wizard-step.active .wizard-step-label { color: var(--text); font-weight: 600; }
.wizard-step-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    border-radius: 2px;
    min-width: 20px;
}

/* Body */
.wizard-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 1.75rem;
}
.wizard-section-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
}
.wizard-section-desc {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
    line-height: 1.55;
}
.wizard-field { margin-bottom: 1.25rem; }
.wizard-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 600px) { .wizard-field-row { grid-template-columns: 1fr; } }
.wizard-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.5rem;
}
.wizard-hint-inline {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* Step 1: Objetivo cards */
.wizard-obj-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.8rem;
    margin-bottom: 1.25rem;
}
@media (max-width: 700px) { .wizard-obj-grid { grid-template-columns: repeat(2, 1fr); } }
.wizard-obj-card {
    background: var(--surface-2);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.wizard-obj-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
}
.wizard-obj-card.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: var(--shadow-accent);
}
.wizard-obj-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.35rem;
}
.wizard-obj-icon svg { width: 18px; height: 18px; }
.wizard-obj-success { background: var(--success-soft); color: var(--success); }
.wizard-obj-info { background: var(--info-soft); color: var(--info); }
.wizard-obj-accent { background: var(--accent-soft); color: var(--accent); }
.wizard-obj-orange { background: rgba(251, 146, 60, 0.15); color: var(--orange); }
.wizard-obj-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}
.wizard-obj-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Destino de mensajería */
.wizard-dest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.wizard-dest-btn {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.65rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    font-weight: 500;
}
.wizard-dest-btn:hover { border-color: var(--border-strong); color: var(--text); }
.wizard-dest-btn.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 600;
}

/* Step 2: Países chips */
.wizard-country-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    max-height: 220px;
    overflow-y: auto;
}
.wizard-country-chip {
    cursor: pointer;
    position: relative;
}
.wizard-country-chip input { position: absolute; opacity: 0; pointer-events: none; }
.wizard-country-chip span {
    display: inline-block;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 20px;
    padding: 0.32rem 0.75rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    transition: all 0.15s;
}
.wizard-country-chip:hover span { border-color: var(--border-strong); color: var(--text); }
.wizard-country-chip.selected span {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 600;
}

/* Range edad (dual) */
.wizard-range-wrap {
    position: relative;
    padding: 0.5rem 0;
}
.wizard-range {
    width: 100%;
    margin: 0;
    appearance: none;
    height: 4px;
    background: var(--surface-3);
    border-radius: 2px;
    outline: none;
    position: relative;
    pointer-events: auto;
}
.wizard-range:nth-child(2) { margin-top: -4px; }
.wizard-range::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    background: var(--accent);
    border: 2px solid var(--surface);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    pointer-events: auto;
}
.wizard-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--accent);
    border: 2px solid var(--surface);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.wizard-range-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

/* Warning */
.wizard-warning {
    margin-top: 0.6rem;
    padding: 0.55rem 0.75rem;
    background: var(--warning-soft);
    border: 1px solid rgba(250, 204, 21, 0.3);
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    color: var(--warning);
    line-height: 1.45;
}

/* Advanced toggle */
.wizard-advanced-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: transparent;
    border: 1px dashed var(--border);
    color: var(--text-muted);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.85rem;
    font-size: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    margin-bottom: 1rem;
}
.wizard-advanced-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
    border-style: solid;
}
.wizard-advanced-toggle svg { width: 14px; height: 14px; }
.wizard-advanced-panel {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1rem 0.25rem;
    margin-bottom: 1.25rem;
}
.wizard-placement-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}
@media (max-width: 600px) { .wizard-placement-grid { grid-template-columns: 1fr; } }
.wizard-place-btn {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.85rem;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.wizard-place-btn strong { font-size: 0.85rem; color: var(--text); }
.wizard-place-btn span { font-size: 0.72rem; color: var(--text-muted); }
.wizard-place-btn:hover { border-color: var(--border-strong); }
.wizard-place-btn.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* Step 3: Presupuesto */
.wizard-budget-wrap {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
.wizard-budget-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.5rem 0.9rem;
}
.wizard-budget-input-wrap:focus-within { border-color: var(--accent); }
.wizard-budget-currency {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-muted);
}
.wizard-budget-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--text);
    font-size: 1.5rem;
    font-weight: 700;
    padding: 0;
    font-family: inherit;
}
.wizard-budget-unit {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}
.wizard-range-single {
    width: 100%;
    appearance: none;
    height: 6px;
    background: var(--surface-3);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}
.wizard-range-single::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background: var(--accent);
    border: 3px solid var(--surface);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.wizard-range-single::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--accent);
    border: 3px solid var(--surface);
    border-radius: 50%;
    cursor: pointer;
}
.wizard-budget-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.wizard-budget-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.wizard-budget-stat-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.wizard-budget-stat strong {
    font-size: 1rem;
    color: var(--text);
    font-weight: 700;
}

/* Toggle pair (CBO/ABO) */
.wizard-toggle-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
@media (max-width: 600px) { .wizard-toggle-pair { grid-template-columns: 1fr; } }
.wizard-toggle-btn {
    background: var(--surface-2);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.75rem 0.9rem;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.wizard-toggle-btn strong { font-size: 0.85rem; color: var(--text); }
.wizard-toggle-btn span { font-size: 0.75rem; color: var(--text-muted); line-height: 1.45; }
.wizard-toggle-btn:hover { border-color: var(--border-strong); }
.wizard-toggle-btn.selected {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* Step 4: Review */
.wizard-review-card {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.wizard-review-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.wizard-review-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    outline: none;
    padding: 0.2rem 0.35rem;
    border-radius: 4px;
    transition: background 0.15s;
}
.wizard-review-name[contenteditable="true"]:hover { background: var(--surface-3); }
.wizard-review-name[contenteditable="true"]:focus { background: var(--surface-3); }
.wizard-review-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.15rem;
}
.wizard-review-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
@media (max-width: 600px) { .wizard-review-grid { grid-template-columns: 1fr; } }
.wizard-review-item {
    background: var(--surface);
    border-radius: var(--radius-md);
    padding: 0.7rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.wizard-review-wide { grid-column: 1 / -1; margin-bottom: 0.5rem; }
.wizard-review-lbl {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.wizard-review-item strong {
    font-size: 0.9rem;
    color: var(--text);
    font-weight: 600;
}
.wizard-review-sub {
    font-size: 0.72rem;
    color: var(--text-subtle);
}
.wizard-info-box {
    display: flex;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    background: var(--info-soft);
    border: 1px solid rgba(96, 165, 250, 0.3);
    border-radius: var(--radius-md);
}
.wizard-info-box svg { width: 18px; height: 18px; color: var(--info); flex-shrink: 0; margin-top: 2px; }
.wizard-info-box strong { display: block; font-size: 0.85rem; color: var(--text); margin-bottom: 0.25rem; }
.wizard-info-box p { font-size: 0.78rem; color: var(--text-muted); line-height: 1.55; margin: 0; }

/* Footer */
.wizard-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.wizard-footer-right {
    display: flex;
    gap: 0.55rem;
}
.wizard-btn {
    padding: 0.55rem 1.1rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    font-family: inherit;
}
.wizard-btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border);
}
.wizard-btn-ghost:hover { background: var(--surface-3); color: var(--text); }
.wizard-btn-secondary {
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--border);
}
.wizard-btn-secondary:hover:not(:disabled) { background: var(--border); }
.wizard-btn-secondary:disabled { opacity: 0.4; cursor: default; }
.wizard-btn-primary {
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-accent);
}
.wizard-btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); }
.wizard-btn-success {
    background: var(--success);
    color: #fff;
    box-shadow: 0 4px 18px rgba(52, 211, 153, 0.3);
}
.wizard-btn-success:hover { background: #22c55e; transform: translateY(-1px); }

/* Mobile */
@media (max-width: 700px) {
    .wizard-stepper { padding: 0.75rem 1rem; gap: 0.3rem; overflow-x: auto; }
    .wizard-step-label { display: none; }
    .wizard-body { padding: 1.1rem 1rem; }
    .wizard-header { padding: 1rem 1rem 0.75rem; }
    .wizard-footer { padding: 0.85rem 1rem; }
    .wizard-obj-grid { gap: 0.5rem; }
    .wizard-obj-card { padding: 0.75rem; }
}

/* =============================================
   AI LOADING COMPONENT (orb animado + pasos + facts)
   ============================================= */
.ai-loading-card {
    max-width: 640px;
    margin: 0 auto;
    padding: 2.5rem 2rem !important;
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
}

/* Respetar patrones de visibility existentes:
   - .loading-state: oculto por default, visible con .visible
   - .hidden: oculto siempre (con !important)
   - inline style display:none: oculto (máxima especificidad)
   Solo aplicar display: flex cuando realmente debe mostrarse */
.loading-state.ai-loading-card:not(.visible) {
    display: none !important;
}
.loading-state.ai-loading-card.visible,
.form-card.ai-loading-card:not(.hidden),
.form-container:not(.hidden) > .form-card.ai-loading-card,
.ai-loading-card.is-shown {
    display: flex;
}

/* Orb animado */
.ai-loading-anim {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ai-loading-orb {
    position: relative;
    width: 100%;
    height: 100%;
}
.ai-loading-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    animation: ai-loading-orbit 3s linear infinite;
}
.ai-loading-ring-1 {
    border-top-color: var(--accent);
    border-right-color: rgba(124, 92, 252, 0.4);
    animation-duration: 2s;
}
.ai-loading-ring-2 {
    border-top-color: var(--info);
    border-left-color: rgba(96, 165, 250, 0.4);
    animation-duration: 3s;
    animation-direction: reverse;
    inset: 8px;
}
.ai-loading-ring-3 {
    border-right-color: rgba(244, 114, 182, 0.5);
    animation-duration: 2.5s;
    inset: 16px;
}
@keyframes ai-loading-orbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ai-loading-core {
    position: absolute;
    inset: 28px;
    background: radial-gradient(circle at 30% 30%, rgba(124, 92, 252, 0.55), rgba(124, 92, 252, 0.15) 70%, transparent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: ai-loading-pulse 2.5s ease-in-out infinite;
    color: #fff;
}
.ai-loading-core svg {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 0 6px rgba(124, 92, 252, 0.8));
    animation: ai-loading-sparkle 1.8s ease-in-out infinite;
}
@keyframes ai-loading-pulse {
    0%, 100% { transform: scale(0.92); opacity: 0.9; }
    50% { transform: scale(1.06); opacity: 1; }
}
@keyframes ai-loading-sparkle {
    0%, 100% { opacity: 0.7; transform: rotate(0deg); }
    50% { opacity: 1; transform: rotate(12deg); }
}

/* Título */
.ai-loading-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.2px;
    max-width: 440px;
    line-height: 1.4;
}

.ai-loading-subtitle {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: -0.2rem;
    margin-bottom: 0.3rem;
    min-height: 1.2em;
}

/* Pasos secuenciales */
.ai-loading-steps {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
}
.ai-loading-step {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.85rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--text-muted);
    transition: all 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
    text-align: left;
}
.ai-step-num {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s;
}
.ai-loading-step.is-active {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--text);
    font-weight: 600;
    box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.15);
}
.ai-loading-step.is-active .ai-step-num {
    background: var(--accent);
    color: #fff;
    animation: ai-step-pulse 1.6s ease-in-out infinite;
}
@keyframes ai-step-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124, 92, 252, 0.6); }
    50% { box-shadow: 0 0 0 6px rgba(124, 92, 252, 0); }
}
.ai-loading-step.is-done {
    opacity: 0.6;
}
.ai-loading-step.is-done .ai-step-num {
    background: var(--success);
    color: #fff;
    font-size: 0;
}
.ai-loading-step.is-done .ai-step-num::before {
    content: '✓';
    font-size: 0.85rem;
}

/* Facts rotativos */
.ai-loading-fact-wrap {
    margin-top: 0.75rem;
    padding: 1.1rem 1.3rem;
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.06), rgba(96, 165, 250, 0.04));
    border: 1px solid rgba(124, 92, 252, 0.2);
    border-radius: var(--radius-lg);
    max-width: 540px;
    width: 100%;
    text-align: left;
}
.ai-loading-fact-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 0.55rem;
}
.ai-loading-fact-label svg {
    width: 13px;
    height: 13px;
}
.ai-loading-fact {
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--text);
    transition: opacity 0.3s ease;
    min-height: 3em;
}

@media (max-width: 600px) {
    .ai-loading-card { padding: 1.75rem 1.25rem !important; }
    .ai-loading-anim { width: 96px; height: 96px; }
    .ai-loading-title { font-size: 0.98rem; }
    .ai-loading-fact { font-size: 0.85rem; }
}

/* =============================================
   OFERTA FORM V2 (optimización UI)
   ============================================= */
.oferta-form-card-v2 {
    padding: 1.5rem 1.75rem 1.75rem;
}
.oferta-form-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
}
.oferta-form-title {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.35rem 0;
    letter-spacing: -0.2px;
}
.oferta-form-title svg {
    width: 22px;
    height: 22px;
    color: var(--accent);
}
.oferta-form-subtitle {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
    max-width: 500px;
}
.oferta-form-progress {
    min-width: 160px;
    text-align: right;
    flex-shrink: 0;
}
.oferta-form-progress-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    display: block;
    margin-bottom: 0.4rem;
}
.oferta-form-progress-bar {
    height: 5px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.3rem;
}
.oferta-form-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--info));
    border-radius: 3px;
    transition: width 0.4s ease;
}
.oferta-form-progress-count {
    font-size: 0.78rem;
    color: var(--text);
    font-weight: 700;
}

/* Bloque especial de marca/producto */
.oferta-brand-block {
    background: linear-gradient(135deg, rgba(124, 92, 252, 0.08), rgba(96, 165, 250, 0.05));
    border: 1px solid rgba(124, 92, 252, 0.25);
    border-radius: var(--radius-lg);
    padding: 1rem 1.15rem;
    margin-bottom: 1.25rem;
}
.oferta-brand-label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.55rem;
}

/* Labels de form-group dentro del oferta form: quitar uppercase, más suave */
.oferta-form-card-v2 .form-label {
    text-transform: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: 0;
    margin-bottom: 0.45rem;
}
.oferta-form-card-v2 .form-hint {
    font-size: 0.74rem;
    color: var(--text-subtle);
    margin-top: 0.3rem;
    display: block;
}

/* El botón submit con más respiración */
.oferta-form-card-v2 .generate-btn {
    margin-top: 1.5rem;
    padding: 0.85rem 1.5rem !important;
    font-size: 0.95rem !important;
    box-shadow: var(--shadow-accent);
    transition: all 0.15s;
}
.oferta-form-card-v2 .generate-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(124, 92, 252, 0.3);
}

/* =============================================
   SKELETONS (loading screens)
   ============================================= */
.skeleton-card,
.skeleton-block,
.skeleton-card-compact {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem;
}
.skeleton-bar {
    height: 10px;
    background: var(--surface-2);
    border-radius: 4px;
    margin: 0.35rem 0;
    position: relative;
    overflow: hidden;
    width: 100%;
}
.skeleton-bar::after,
.skeleton-avatar::after,
.skeleton-star::after,
.skeleton-stair::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
    animation: skeleton-shimmer 1.4s infinite;
}
@keyframes skeleton-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.skeleton-bar-lg { height: 22px; }
.skeleton-bar-title { height: 18px; width: 60%; }
.skeleton-bar-label { height: 8px; width: 40%; background: var(--surface-3); }
.skeleton-bar-chip { height: 22px; width: 90px; border-radius: 20px; }
.skeleton-bar-chip-md { height: 22px; width: 110px; border-radius: 20px; }
.skeleton-bar-time { height: 14px; width: 45px; }
.skeleton-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.skeleton-row-between { justify-content: space-between; }
.skeleton-col-flex { flex: 1; }
.skeleton-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--surface-2);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.skeleton-pairs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}
@media (max-width: 900px) { .skeleton-pairs-grid { grid-template-columns: 1fr; } }

.skeleton-hook {
    margin-top: 0.75rem;
    padding: 1rem;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--accent-soft);
}
.skeleton-timeline {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 0.5rem;
}
.skeleton-timeline-row {
    display: flex;
    gap: 0.8rem;
}
.skeleton-timeline-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.skeleton-stars {
    display: flex;
    gap: 0.3rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}
.skeleton-star {
    width: 18px;
    height: 18px;
    background: var(--surface-2);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}
.skeleton-oferta { padding: 1rem 0.5rem; }
.skeleton-stairs {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
}
.skeleton-stair {
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}
.skeleton-generic { display: flex; flex-direction: column; gap: 1rem; }
.skeleton-personas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
@media (max-width: 900px) { .skeleton-personas { grid-template-columns: 1fr; } }
.skeleton-list {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.skeleton-row-item {
    padding: 0.85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.skeleton-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.skeleton-card-compact {
    min-height: 160px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* =============================================
   TOAST V2
   ============================================= */
.toast-container-v2 {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    max-width: calc(100vw - 40px);
}
.toast-v2 {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.65rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 240px;
    max-width: 420px;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transform: translateX(24px);
    transition: opacity 0.24s ease, transform 0.24s ease;
    pointer-events: auto;
    border-left: 3px solid var(--info);
}
.toast-v2-show {
    opacity: 1;
    transform: translateX(0);
}
.toast-v2-exit {
    opacity: 0;
    transform: translateX(24px);
}
.toast-v2-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.toast-v2-icon svg { width: 18px; height: 18px; }
.toast-v2-message {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
}
.toast-v2-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.2rem;
    margin-left: 0.3rem;
    border-radius: 4px;
}
.toast-v2-close:hover { color: var(--text); background: var(--surface-2); }

.toast-v2-success { border-left-color: var(--success); }
.toast-v2-success .toast-v2-icon { color: var(--success); }
.toast-v2-error { border-left-color: var(--danger); }
.toast-v2-error .toast-v2-icon { color: var(--danger); }
.toast-v2-warning { border-left-color: var(--warning); }
.toast-v2-warning .toast-v2-icon { color: var(--warning); }
.toast-v2-info { border-left-color: var(--info); }
.toast-v2-info .toast-v2-icon { color: var(--info); }

/* =============================================
   MICRO-INTERACCIONES: Ripple
   ============================================= */
.ui-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    pointer-events: none;
    transform: scale(0);
    animation: ui-ripple-expand 0.6s ease-out;
}
@keyframes ui-ripple-expand {
    to {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* Focus visible solo con teclado */
body:not(.ui-keyboard) *:focus { outline: none; }
body.ui-keyboard button:focus,
body.ui-keyboard input:focus,
body.ui-keyboard select:focus,
body.ui-keyboard textarea:focus,
body.ui-keyboard a:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* =============================================
   ONBOARDING GUIADO (tour)
   ============================================= */
.onb-overlay {
    position: fixed;
    inset: 0;
    z-index: 9997;
    pointer-events: none;
}
.onb-overlay-bg {
    position: absolute;
    inset: 0;
    background: transparent;
    animation: onb-fade-in 0.25s ease;
    pointer-events: auto;
}
/* Solo oscurecer el viewport cuando NO hay highlight (paso final / sin target).
   Cuando hay highlight, su box-shadow ya genera el spotlight oscuro alrededor. */
.onb-overlay.no-highlight .onb-overlay-bg {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
}
@keyframes onb-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.onb-highlight {
    position: fixed;
    z-index: 9998;
    border-radius: 14px;
    border: 2px solid var(--accent);
    box-shadow:
        0 0 0 4px rgba(124, 92, 252, 0.35),
        0 0 0 9999px rgba(0, 0, 0, 0.55);
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.2, 0.9, 0.3, 1);
    animation: onb-highlight-pulse 2s ease-in-out infinite;
}
@keyframes onb-highlight-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(124, 92, 252, 0.35), 0 0 0 9999px rgba(0, 0, 0, 0.55); }
    50% { box-shadow: 0 0 0 8px rgba(124, 92, 252, 0.5), 0 0 0 9999px rgba(0, 0, 0, 0.55); }
}

.onb-tooltip {
    position: fixed;
    z-index: 9999;
    width: 360px;
    max-width: calc(100vw - 40px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-lg);
    animation: onb-tooltip-in 0.25s ease;
}
@keyframes onb-tooltip-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* Arrow según placement */
.onb-tooltip::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    transform: rotate(45deg);
}
.onb-tooltip[data-placement="bottom"]::before {
    top: -7px;
    left: 50%;
    margin-left: -6px;
    border-right: none;
    border-bottom: none;
}
.onb-tooltip[data-placement="top"]::before {
    bottom: -7px;
    left: 50%;
    margin-left: -6px;
    border-left: none;
    border-top: none;
}
.onb-tooltip[data-placement="right"]::before {
    left: -7px;
    top: 50%;
    margin-top: -6px;
    border-right: none;
    border-top: none;
}
.onb-tooltip[data-placement="left"]::before {
    right: -7px;
    top: 50%;
    margin-top: -6px;
    border-left: none;
    border-bottom: none;
}
.onb-tooltip[data-placement="center"]::before { display: none; }

.onb-progress {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.85rem;
}
.onb-progress-count {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.onb-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--surface-2);
    border-radius: 2px;
    overflow: hidden;
}
.onb-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--info));
    border-radius: 2px;
    transition: width 0.4s ease;
}

.onb-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem 0;
    line-height: 1.3;
}
.onb-text {
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 1.1rem;
}
.onb-text strong { color: var(--text); font-weight: 600; }

.onb-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}
.onb-actions-right {
    display: flex;
    gap: 0.35rem;
}
.onb-btn {
    padding: 0.45rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-md);
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: all 0.15s;
}
.onb-btn-skip {
    background: transparent;
    color: var(--text-muted);
}
.onb-btn-skip:hover { color: var(--text); }
.onb-btn-prev {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}
.onb-btn-prev:hover:not(:disabled) { background: var(--surface-2); }
.onb-btn-prev:disabled { opacity: 0.4; cursor: default; }
.onb-btn-next {
    background: var(--accent);
    color: #fff;
    box-shadow: var(--shadow-accent);
}
.onb-btn-next:hover { background: var(--accent-hover); }
.onb-btn-success {
    background: var(--success);
    box-shadow: 0 4px 18px rgba(52, 211, 153, 0.3);
}
.onb-btn-success:hover { background: #22c55e; }

/* =============================================
   MIS PRODUCTOS (grid de cards + drawer)
   ============================================= */

/* Toolbar */
.prods-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.prods-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex: 1;
    flex-wrap: wrap;
}
.prods-search-wrap {
    position: relative;
    flex: 1;
    max-width: 260px;
    min-width: 180px;
}
.prods-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    pointer-events: none;
}
.prods-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.82rem;
    font-family: inherit;
}
.prods-search-input:focus { outline: none; border-color: var(--accent); }
.prods-filter-select {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    cursor: pointer;
    min-width: 140px;
}
.prods-filter-select:focus { outline: none; border-color: var(--accent); }
.prods-toolbar-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0 0.5rem;
    font-weight: 500;
}

/* Empty state mejorado */
.neg-empty-state { padding: 3rem 1rem; text-align: center; }
.prods-empty-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: 50%;
}
.prods-empty-icon svg { width: 26px; height: 26px; }
#negProductsEmpty h3 {
    color: var(--text);
    font-size: 1rem;
    margin-bottom: 0.4rem;
}
#negProductsEmpty p {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0 auto 1.2rem;
    max-width: 440px;
    line-height: 1.55;
}
.prods-empty-cta {
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    box-shadow: var(--shadow-accent);
    font-family: inherit;
}
.prods-empty-cta:hover { background: var(--accent-hover); }
.prods-empty-cta svg { width: 14px; height: 14px; }

/* Grid de productos */
.neg-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
@media (max-width: 650px) { .neg-products-grid { grid-template-columns: 1fr; } }

/* Card de producto */
.neg-product-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 260px;
}
.neg-product-card:hover {
    border-color: var(--border-strong);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.neg-pc-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.3rem;
}
.neg-pc-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.neg-pc-icon-wrap svg { width: 22px; height: 22px; stroke-width: 1.8; }
.neg-pc-menu {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.neg-pc-menu:hover {
    color: var(--text);
    background: var(--surface-2);
    border-color: var(--border);
}
.neg-pc-menu svg { width: 16px; height: 16px; }

.neg-pc-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.neg-pc-brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
}
.neg-pc-brand-chip svg { width: 12px; height: 12px; }

.neg-pc-tags {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}
.neg-pc-tag {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.neg-pc-tag-accent { background: var(--accent-soft); color: var(--accent); }
.neg-pc-tag-info { background: var(--info-soft); color: var(--info); }
.neg-pc-tag-sub {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text-muted);
    border: 1px solid var(--border);
}

.neg-pc-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.neg-pc-desc-empty { font-style: italic; opacity: 0.6; }

.neg-pc-compl {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.05);
}
.neg-pc-compl-bar {
    flex: 1;
    height: 5px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
}
.neg-pc-compl-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.4s ease;
}
.neg-pc-compl-green { background: var(--success); }
.neg-pc-compl-yellow { background: var(--warning); }
.neg-pc-compl-red { background: var(--danger); }
.neg-pc-compl-pct {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    min-width: 35px;
    text-align: right;
}

/* Acciones en card */
.neg-pc-actions {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.25rem;
}
.neg-pc-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.45rem 0.65rem;
    border-radius: var(--radius-md);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    font-family: inherit;
    transition: all 0.15s;
}
.neg-pc-btn svg { width: 13px; height: 13px; }
.neg-pc-btn-primary {
    background: var(--accent);
    color: #fff;
}
.neg-pc-btn-primary:hover { background: var(--accent-hover); }
.neg-pc-btn-secondary {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}
.neg-pc-btn-secondary:hover {
    background: var(--surface-2);
    border-color: var(--border-strong);
}

/* Card "+ Nuevo producto" */
.neg-product-card-new {
    background: transparent;
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
    min-height: 260px;
    font-family: inherit;
    text-align: center;
}
.neg-product-card-new:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
}
.neg-pc-new-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.35rem;
    transition: all 0.15s;
}
.neg-product-card-new:hover .neg-pc-new-icon {
    background: var(--accent);
    color: #fff;
}
.neg-pc-new-icon svg { width: 22px; height: 22px; }
.neg-pc-new-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
}
.neg-pc-new-desc {
    font-size: 0.78rem;
    color: var(--text-muted);
    max-width: 220px;
    line-height: 1.45;
}

/* Clear filters button */
.prods-clear-filters {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(124, 92, 252, 0.3);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.prods-clear-filters:hover { background: rgba(124, 92, 252, 0.18); }
.neg-product-noresults {
    grid-column: 1 / -1;
    min-height: 200px;
    cursor: default;
}
.neg-product-noresults:hover { transform: none; }

/* Floating menu (3 dots) */
.prods-floating-menu {
    position: fixed;
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.35rem;
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    animation: prods-menu-in 0.12s ease;
}
@keyframes prods-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.prods-menu-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 0.82rem;
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.prods-menu-item:hover { background: var(--surface-2); }
.prods-menu-item svg { width: 14px; height: 14px; color: var(--text-muted); }
.prods-menu-item-danger { color: var(--danger); }
.prods-menu-item-danger svg { color: var(--danger); }
.prods-menu-item-danger:hover { background: var(--danger-soft); }
.prods-menu-divider {
    height: 1px;
    background: var(--border);
    margin: 0.3rem 0;
}

/* =============================================
   DRAWER lateral de detalle de producto
   ============================================= */
.prods-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(3px);
    z-index: 900;
    display: flex;
    justify-content: flex-end;
    animation: prods-drawer-bg-in 0.2s ease;
}
.prods-drawer-overlay.hidden { display: none; }
@keyframes prods-drawer-bg-in {
    from { background: rgba(0,0,0,0); backdrop-filter: blur(0); }
    to { background: rgba(0,0,0,0.55); backdrop-filter: blur(3px); }
}
.prods-drawer {
    width: 100%;
    max-width: 520px;
    height: 100vh;
    background: var(--surface);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
    box-shadow: -8px 0 32px rgba(0,0,0,0.4);
}
.prods-drawer.open { transform: translateX(0); }

.prods-drawer-header {
    padding: 1.2rem 1.4rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    flex-shrink: 0;
}
.prods-drawer-title-wrap {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
}
.prods-drawer-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.prods-drawer-icon svg { width: 22px; height: 22px; }
.prods-drawer-title-content { min-width: 0; flex: 1; }
.prods-drawer-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.2rem 0;
    line-height: 1.25;
}
.prods-drawer-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.prods-drawer-brand { color: var(--accent); font-weight: 600; }
.prods-drawer-sep { opacity: 0.5; }

.prods-drawer-close {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    flex-shrink: 0;
}
.prods-drawer-close:hover { background: var(--surface-2); color: var(--text); }

.prods-drawer-completeness {
    padding: 0.85rem 1.4rem 1rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.prods-drawer-compl-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.4rem;
    font-size: 0.78rem;
    color: var(--text-muted);
}
.prods-drawer-compl-label strong { color: var(--text); font-weight: 700; }
.prods-drawer-compl-bar {
    height: 6px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.65rem;
}
.prods-drawer-compl-fill {
    height: 100%;
    transition: width 0.4s ease;
}
.prods-drawer-compl-green { background: var(--success); }
.prods-drawer-compl-yellow { background: var(--warning); }
.prods-drawer-compl-red { background: var(--danger); }

.prods-drawer-compl-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}
.prods-check {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-weight: 500;
}
.prods-check.ok {
    background: var(--success-soft);
    color: var(--success);
}
.prods-check.miss {
    background: var(--surface-2);
    color: var(--text-subtle);
}
.prods-check svg { width: 11px; height: 11px; }

/* Body */
.prods-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.prods-drawer-section { }
.prods-drawer-section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.6rem;
}
.prods-drawer-section-title svg {
    width: 14px;
    height: 14px;
    color: var(--accent);
}
.prods-drawer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.prods-drawer-list li {
    position: relative;
    padding: 0.5rem 0.8rem 0.5rem 1.6rem;
    background: var(--surface-2);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.5;
}
.prods-drawer-list li::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    background: var(--accent);
    border-radius: 50%;
}
.prods-drawer-paragraph {
    font-size: 0.88rem;
    color: var(--text);
    line-height: 1.6;
    margin: 0;
    padding: 0.7rem 0.85rem;
    background: var(--surface-2);
    border-radius: var(--radius-md);
}
.prods-drawer-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}
.prods-drawer-info-item {
    background: var(--surface-2);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.prods-drawer-info-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.prods-drawer-info-item strong {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text);
}
.prods-drawer-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted);
    font-size: 0.88rem;
}

/* Footer */
.prods-drawer-footer {
    padding: 0.85rem 1.4rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    background: var(--surface-2);
}
.prods-drawer-btn {
    padding: 0.55rem 0.9rem;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: inherit;
    transition: all 0.15s;
}
.prods-drawer-btn svg { width: 14px; height: 14px; }
.prods-drawer-btn-primary {
    background: var(--accent);
    color: #fff;
    flex: 1;
    justify-content: center;
    box-shadow: var(--shadow-accent);
}
.prods-drawer-btn-primary:hover { background: var(--accent-hover); }
.prods-drawer-btn-secondary {
    background: transparent;
    border-color: var(--border);
    color: var(--text);
}
.prods-drawer-btn-secondary:hover {
    background: var(--surface);
    border-color: var(--border-strong);
}
.prods-drawer-btn-icon {
    padding: 0.55rem;
    width: 36px;
    height: 36px;
    justify-content: center;
    color: var(--text-muted);
    background: transparent;
    border-color: var(--border);
}
.prods-drawer-btn-icon:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-soft); }
.prods-drawer-btn-danger:hover { color: var(--danger); }

/* Mobile drawer */
@media (max-width: 600px) {
    .prods-drawer { max-width: 100%; }
}

/* =============================================
   PLANIFICADOR DE CAMPAÑAS (rediseño horizontal)
   ============================================= */

/* Toolbar */
.planner-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 0 1rem;
    flex-wrap: wrap;
}
.planner-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex: 1;
}
.planner-search-wrap {
    position: relative;
    flex: 1;
    max-width: 280px;
    min-width: 180px;
}
.planner-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    pointer-events: none;
}
.planner-search-input {
    width: 100%;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.82rem;
    font-family: inherit;
    transition: border-color 0.15s;
}
.planner-search-input:focus { outline: none; border-color: var(--accent); }
.planner-filter-select {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text);
    font-size: 0.82rem;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    cursor: pointer;
    min-width: 140px;
}
.planner-filter-select:focus { outline: none; border-color: var(--accent); }
.planner-toolbar-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    padding: 0 0.5rem;
    font-weight: 500;
}
.planner-empty-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    border-radius: 50%;
    color: var(--accent);
}
.planner-empty-icon svg { width: 24px; height: 24px; }

/* Grid → lista vertical */
.planner-grid {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

/* Card horizontal (fila) */
.planner-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all 0.15s;
}
.planner-row:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-sm);
}
.planner-row.is-published {
    background: linear-gradient(90deg, rgba(52, 211, 153, 0.04), transparent 20%);
}

/* Status dot + label */
.planner-row-status {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 90px;
}
.planner-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.planner-status-dot-draft { background: var(--warning); box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.15); }
.planner-status-dot-published {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
    animation: pulse-published 2.5s ease-in-out infinite;
}
@keyframes pulse-published {
    0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2); }
    50% { box-shadow: 0 0 0 5px rgba(52, 211, 153, 0.35); }
}
.planner-status-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* Main info */
.planner-row-main { min-width: 0; }
.planner-row-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.35rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.planner-row-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.planner-chip {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.planner-chip-obj-success { background: var(--success-soft); color: var(--success); }
.planner-chip-obj-info { background: var(--info-soft); color: var(--info); }
.planner-chip-obj-accent { background: var(--accent-soft); color: var(--accent); }
.planner-chip-obj-orange { background: rgba(251, 146, 60, 0.15); color: var(--orange); }
.planner-chip-muted {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    padding: 0.15rem 0.1rem;
}
.planner-chip-muted svg { width: 11px; height: 11px; }
.planner-chip-warning {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--warning);
    background: var(--warning-soft);
    padding: 0.2rem 0.55rem;
    border-radius: 20px;
}
.planner-chip-warning svg { width: 12px; height: 12px; }

/* Thumbs */
.planner-row-thumbs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.planner-row-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    background: var(--surface-2);
    border: 1px solid var(--border);
}
.planner-row-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-subtle);
}
.planner-row-thumb-empty svg { width: 14px; height: 14px; }
.planner-row-thumb-more {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
}

/* Actions */
.planner-row-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}
.planner-row-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--radius-md);
    padding: 0.45rem 0.8rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: inherit;
}
.planner-row-btn:hover:not(:disabled) {
    background: var(--surface-2);
    border-color: var(--border-strong);
}
.planner-row-btn:disabled { opacity: 0.4; cursor: default; }
.planner-row-btn svg { width: 13px; height: 13px; }
.planner-row-btn-publish {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.planner-row-btn-publish:hover:not(:disabled) {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
}
.planner-row-btn-icon {
    padding: 0.45rem;
    width: 32px;
    height: 32px;
    justify-content: center;
    color: var(--text-muted);
}
.planner-row-btn-icon:hover:not(:disabled) { color: var(--text); }
.planner-row-btn-danger:hover:not(:disabled) {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--danger-soft);
}
.planner-row-published-date {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
    padding: 0 0.5rem;
}

/* No results */
.planner-no-results {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--text-muted);
}
.planner-no-results svg {
    width: 40px;
    height: 40px;
    margin-bottom: 0.75rem;
    opacity: 0.5;
}
.planner-no-results p { font-size: 0.9rem; margin-bottom: 0.85rem; }
.planner-clear-filters {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid rgba(124, 92, 252, 0.3);
    border-radius: var(--radius-md);
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.planner-clear-filters:hover { background: rgba(124, 92, 252, 0.18); }

/* Mobile */
@media (max-width: 800px) {
    .planner-row {
        grid-template-columns: 1fr;
        gap: 0.6rem;
    }
    .planner-row-status {
        justify-content: flex-start;
    }
    .planner-row-thumbs { justify-content: flex-start; }
    .planner-row-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
    .planner-toolbar { flex-direction: column; align-items: stretch; }
    .planner-toolbar-left { flex-direction: column; align-items: stretch; }
    .planner-search-wrap { max-width: 100%; }
}

/* =============================================
   SUBTAB MÉTRICAS
   ============================================= */

.metrics-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 0 1.25rem;
    flex-wrap: wrap;
}
.metrics-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex: 1;
    min-width: 200px;
    flex-wrap: wrap;
}
.metrics-period-btns {
    display: inline-flex;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 3px;
    gap: 2px;
}
.metrics-period-btn {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 0.4rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.metrics-period-btn:hover { color: var(--text); }
.metrics-period-btn.active {
    background: var(--accent);
    color: #fff;
}
.metrics-refresh-btn {
    width: 36px;
    height: 36px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.metrics-refresh-btn:hover { color: var(--text); border-color: var(--border-strong); }
.metrics-refresh-btn svg { width: 15px; height: 15px; }

/* Loading/empty states */
.metrics-loading {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-muted);
}
.metrics-loading .loader {
    margin: 0 auto 1rem;
    width: 38px;
    height: 38px;
    border: 3px solid rgba(124, 92, 252, 0.2);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: loader-spin 0.8s linear infinite;
}
@keyframes loader-spin { to { transform: rotate(360deg); } }
.metrics-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-muted);
}
.metrics-empty-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    border-radius: 50%;
    color: var(--accent);
}
.metrics-empty-icon svg { width: 26px; height: 26px; }
.metrics-empty h3 {
    color: var(--text);
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.metrics-empty p {
    max-width: 420px;
    margin: 0 auto;
    line-height: 1.55;
    font-size: 0.88rem;
}

/* KPI cards */
.metrics-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}
@media (max-width: 900px) { .metrics-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .metrics-kpis { grid-template-columns: 1fr; } }

.metrics-kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.15rem;
    position: relative;
}
.metrics-kpi-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
}
.metrics-kpi-icon svg { width: 18px; height: 18px; }
.metrics-kpi-icon-spend { background: var(--success-soft); color: var(--success); }
.metrics-kpi-icon-impressions { background: var(--info-soft); color: var(--info); }
.metrics-kpi-icon-clicks { background: rgba(251, 146, 60, 0.15); color: var(--orange); }
.metrics-kpi-icon-results { background: var(--accent-soft); color: var(--accent); }
.metrics-kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.35rem;
}
.metrics-kpi-value {
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.5px;
    line-height: 1.1;
    margin-bottom: 0.3rem;
}
.metrics-kpi-sub {
    font-size: 0.75rem;
    color: var(--text-subtle);
    font-weight: 500;
}

/* Tabla de campañas */
.metrics-campaigns-wrap {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.metrics-campaigns-header {
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.metrics-campaigns-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}
.metrics-campaigns-header h3 svg { width: 16px; height: 16px; color: var(--accent); }
.metrics-campaigns-count {
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}
.metrics-table-wrap {
    overflow-x: auto;
}
.metrics-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.metrics-table thead th {
    text-align: left;
    padding: 0.75rem 1rem;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.metrics-table td {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
    vertical-align: middle;
}
.metrics-table tr:last-child td { border-bottom: none; }
.metrics-table tr:hover td { background: rgba(255,255,255,0.02); }
.metrics-table .t-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.metrics-table .t-strong { font-weight: 700; color: var(--text); }
.metrics-table .t-name {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--text);
}
.metrics-result-type {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.18rem 0.55rem;
    border-radius: 20px;
    background: var(--accent-soft);
    color: var(--accent);
}
.metrics-table-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Copy Out: brain selector compacto (marca + producto en una fila) */
.copyout-brain-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
}
@media (max-width: 600px) {
    .copyout-brain-row { grid-template-columns: 1fr; }
}

/* =============================================
   ESTRATEGIA DE ADS (nuevo tab top-level)
   ============================================= */
#tabEstrategia .estrategia-page-header {
    padding: 1.5rem 2rem 0.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
#tabEstrategia .estrategia-page-title {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin-bottom: 0.3rem;
    color: var(--text);
}
#tabEstrategia .estrategia-page-title svg {
    width: 24px;
    height: 24px;
    color: var(--accent);
    stroke-width: 2;
}
#tabEstrategia .estrategia-page-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 1.25rem;
}
/* Forzar mostrar nsubEstrategia siempre cuando esté dentro de esubPlaneacion */
#esubPlaneacion > #nsubEstrategia,
#esubIdeas > #ideasSubIdeas,
#esubCopy > #ideasSubCopyout,
#esubEscaletas > #ideasSubEscaleta,
#esubMisAnuncios > #metaSubAds {
    display: block !important;
}

/* Subpaneles de Estrategia: control de visibilidad por .active */
.estrategia-subpanel { display: none; }
.estrategia-subpanel.active { display: block; }

/* El layout de estrategia reutiliza estilos de .negocio-layout */
.estrategia-layout {
    padding: 0 1rem;
    max-width: 100%;
}

/* =============================================
   BRAND CARD - layout horizontal (1 por fila)
   ============================================= */
.neg-brand-card-h {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.2rem 1.4rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.neg-brand-card-h:hover {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-md);
}

.neg-brand-h-main {
    display: flex;
    gap: 1.2rem;
    align-items: flex-start;
}

/* Logo grande a la izquierda */
.neg-brand-h-logo {
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
}
.neg-brand-logo-lg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 6px;
    background: #fff;
}
.neg-brand-logo-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--accent), #9333ea);
    color: #fff;
    font-weight: 800;
    font-size: 1.6rem;
}

/* Body */
.neg-brand-h-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.neg-brand-h-top {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
}
.neg-brand-h-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.2rem 0;
    letter-spacing: -0.2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.neg-brand-h-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Completitud */
.neg-brand-h-completeness {
    min-width: 180px;
    text-align: right;
}
.neg-brand-h-compl-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
    font-weight: 500;
    letter-spacing: 0.3px;
}
.neg-brand-h-compl-bar {
    height: 5px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
}
.neg-brand-h-compl-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--info));
    border-radius: 3px;
    transition: width 0.4s ease;
}

/* Icon buttons */
.neg-brand-h-actions {
    display: flex;
    gap: 0.25rem;
}
.neg-icon-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
}
.neg-icon-btn:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border-strong);
}
.neg-icon-btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 1.75;
}
.neg-icon-btn-danger:hover {
    color: var(--danger);
    border-color: var(--danger);
    background: var(--danger-soft);
}

/* Row: colores + tipografía + personajes */
.neg-brand-h-row {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
    padding: 0.75rem 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.neg-brand-h-chunk {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
}
.neg-brand-h-chunk-icon {
    width: 15px;
    height: 15px;
    color: var(--text-muted);
    flex-shrink: 0;
}
.neg-brand-h-chunk .neg-colors-wrap {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    flex-wrap: wrap;
}
.neg-color-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: inline-block;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
}
.neg-color-more {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 0.2rem;
}
.neg-brand-h-font {
    font-size: 0.88rem;
    color: var(--text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.neg-brand-h-empty {
    font-size: 0.78rem;
    color: var(--text-subtle);
    font-style: italic;
}

/* Avatar stack para personajes/fotos */
.neg-avatar-stack {
    display: flex;
    align-items: center;
}
.neg-avatar-stack-img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--surface);
    margin-left: -8px;
    background: var(--surface-2);
}
.neg-avatar-stack-img:first-child { margin-left: 0; }
.neg-avatar-stack-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--surface-3);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    margin-left: -8px;
    border: 2px solid var(--surface);
}

/* Productos: chips */
.neg-brand-h-products {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.neg-brand-h-products-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.neg-brand-h-products-label svg {
    width: 14px;
    height: 14px;
}
.neg-brand-h-products-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}
.neg-product-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.5rem 0.35rem 0.65rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    color: var(--text);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    max-width: 100%;
}
.neg-product-chip:hover {
    background: var(--surface-3);
    border-color: var(--accent);
}
.neg-product-chip-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.neg-product-chip-dot-prd { background: var(--info); }
.neg-product-chip-dot-srv { background: var(--accent); }
.neg-product-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.neg-product-chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    margin-left: 0.15rem;
    transition: all 0.12s;
}
.neg-product-chip-x:hover {
    background: var(--danger-soft);
    color: var(--danger);
}
.neg-product-chip-add {
    background: transparent;
    border: 1px dashed var(--border-strong);
    color: var(--text-muted);
    font-weight: 500;
    padding: 0.35rem 0.75rem;
}
.neg-product-chip-add svg {
    width: 12px;
    height: 12px;
}
.neg-product-chip-add:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}

/* Responsive */
@media (max-width: 900px) {
    .neg-brand-h-top {
        grid-template-columns: 1fr auto;
    }
    .neg-brand-h-completeness {
        grid-column: 1 / -1;
        text-align: left;
        margin-top: 0.5rem;
    }
    .neg-brand-h-row {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }
}
@media (max-width: 600px) {
    .neg-brand-h-main {
        gap: 0.85rem;
    }
    .neg-brand-h-logo {
        width: 48px;
        height: 48px;
    }
    .neg-brand-h-name {
        font-size: 1rem;
    }
}

/* =============================================
   GUION TIMELINE VISUAL
   ============================================= */
.guion-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0.2rem;
}
.guion-section {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 0.85rem;
    position: relative;
    padding-bottom: 1.1rem;
}
.guion-section.last { padding-bottom: 0; }

.guion-time-col {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.1rem;
}
.guion-time-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    background: var(--surface-2);
    padding: 0.25rem 0.5rem;
    border-radius: 10px;
    white-space: nowrap;
    letter-spacing: 0.3px;
    border: 1px solid var(--border);
}
.guion-time-node {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent);
    margin: 0.5rem 0 0.3rem;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(124, 92, 252, 0.15);
}
.guion-time-node.timeline-node-hook {
    background: var(--pink);
    box-shadow: 0 0 0 3px rgba(244, 114, 182, 0.2);
}
.guion-time-node.timeline-node-cta {
    background: var(--success);
    box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.2);
}
.guion-time-line {
    flex: 1;
    width: 2px;
    background: linear-gradient(to bottom, var(--border), var(--border) 50%, transparent 100%);
    min-height: 20px;
}

.guion-body-col {
    min-width: 0;
    padding-top: 0.1rem;
}
.guion-section-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.35rem;
    letter-spacing: 0.1px;
}
.guion-section-content {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text);
}
.guion-section-content p { margin: 0.3rem 0; }
.guion-section-content p:first-child { margin-top: 0; }
.guion-section-content p:last-child { margin-bottom: 0; }
.guion-section-content strong {
    color: var(--text);
    font-weight: 600;
}

/* =============================================
   HISTORIAL DE REGENERACIÓN (botón "Anterior")
   ============================================= */
.ideas-pair-history {
    background: transparent;
    border: 1px dashed var(--border-strong);
    color: var(--text-muted);
    padding: 0.35rem 0.7rem;
    font-size: 0.75rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.15s;
    font-family: inherit;
}
.ideas-pair-history:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--accent-soft);
}
.ideas-pair-history svg {
    width: 13px;
    height: 13px;
}

/* =============================================
   RESULTS HEADER STICKY + RESPONSIVE TABS <1200px
   ============================================= */
.results-header-v2 {
    position: sticky;
    top: 64px; /* debajo del topbar */
    z-index: 40;
    background: var(--bg);
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border);
    margin: 0 -1rem 1rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Tabs responsive (cuando hay 2 propuestas lado a lado en <1200px, convertir a tabs) */
.ideas-responsive-tabs {
    display: none;
    gap: 0.4rem;
    padding: 0.5rem 0;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
}
.ideas-responsive-tab {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-muted);
    padding: 0.55rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    flex: 1;
    transition: all 0.15s;
    font-family: inherit;
}
.ideas-responsive-tab:hover { color: var(--text); }
.ideas-responsive-tab.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

@media (max-width: 1199px) {
    .ideas-responsive-tabs { display: flex; }
    .ideas-pairs-grid {
        display: block;
    }
    .ideas-pair-card[data-pair-idx="0"],
    .ideas-pair-card[data-pair-idx="1"] {
        display: none;
    }
    .ideas-pair-card.responsive-active {
        display: flex !important;
    }
}

@media (max-width: 700px) {
    .results-header-v2 {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    .results-header-right {
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .results-group-label { display: none; }
}

/* =============================================
   HOME: actividad item con flecha + modal de contenido
   ============================================= */
.home-activity-item {
    position: relative;
}
.home-activity-item-arrow {
    width: 16px;
    height: 16px;
    color: var(--text-subtle);
    flex-shrink: 0;
    transition: transform 0.15s, color 0.15s;
}
.home-activity-item:hover .home-activity-item-arrow {
    color: var(--accent);
    transform: translateX(3px);
}

/* Activity Modal */
.activity-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.activity-modal-overlay.active { display: flex; }
.activity-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0;
    width: 100%;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    position: relative;
    box-shadow: var(--shadow-lg);
    animation: modalFadeIn 0.18s ease;
}
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.activity-modal-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    border: none;
    color: var(--text-muted);
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
    z-index: 1;
}
.activity-modal-close:hover {
    background: var(--surface-3);
    color: var(--text);
}
.activity-modal-header {
    padding: 1.5rem 1.5rem 0.8rem;
    border-bottom: 1px solid var(--border);
}
.activity-modal-label {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--accent);
    background: var(--accent-soft);
    padding: 0.25rem 0.65rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
}
.activity-modal-meta {
    color: var(--text-muted);
    font-size: 0.82rem;
}
.activity-modal-meta strong {
    color: var(--text);
    font-weight: 600;
}
.activity-modal-body {
    padding: 1.2rem 1.5rem;
    overflow-y: auto;
    flex: 1;
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--text);
}
.activity-modal-pre {
    font-family: inherit;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text);
}
.activity-modal-actions {
    padding: 0.8rem 1.5rem;
    border-top: 1px solid var(--border);
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
.activity-modal-actions button {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 0.5rem 0.95rem;
    border-radius: var(--radius-md);
    font-size: 0.82rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.15s;
    font-family: inherit;
}
.activity-modal-actions button svg { width: 14px; height: 14px; }
.activity-modal-actions button:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-soft);
}
.activity-modal-library {
    background: var(--accent) !important;
    color: #fff !important;
    border-color: var(--accent) !important;
}
.activity-modal-library:hover {
    background: var(--accent-hover) !important;
    color: #fff !important;
}

/* =========================================================
   PRODUCT MODAL — Wizard de 3 pasos (pm-*)
   ========================================================= */
.pm-card {
    width: 100%;
    max-width: 720px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    background: var(--surface);
}

/* Header */
.pm-header {
    padding: 1.25rem 1.5rem 0;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface-2, var(--surface)) 0%, var(--surface) 100%);
}
.pm-header-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.pm-title {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text);
}
.pm-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.pm-subtitle .pm-brand {
    color: var(--accent);
    font-weight: 600;
}

/* Progress bar */
.pm-progress {
    margin-bottom: 1rem;
}
.pm-progress-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 0.375rem;
}
.pm-progress-label strong {
    color: var(--accent);
    font-weight: 700;
}
.pm-progress-track {
    height: 6px;
    background: var(--surface-3, rgba(255,255,255,0.05));
    border-radius: 6px;
    overflow: hidden;
}
.pm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-hover, var(--accent)) 100%);
    border-radius: 6px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Step tabs */
.pm-steps {
    display: flex;
    gap: 0.5rem;
    margin-bottom: -1px;
}
.pm-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s;
}
.pm-step:hover {
    color: var(--text);
}
.pm-step.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.pm-step.is-done {
    color: var(--success, #10b981);
}
.pm-step.is-done .pm-step-num {
    background: var(--success, #10b981);
    color: #fff;
}
.pm-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--surface-3, rgba(255,255,255,0.08));
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.pm-step.is-active .pm-step-num {
    background: var(--accent);
    color: #fff;
}
.pm-step-label {
    white-space: nowrap;
}

/* Body */
.pm-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}
.pm-step-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Fields */
.pm-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.pm-field-full {
    width: 100%;
}
.pm-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 600px) {
    .pm-grid-2 { grid-template-columns: 1fr; }
}
.pm-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    text-transform: none;
    letter-spacing: 0;
}
.pm-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pm-req {
    color: #ef4444;
    font-weight: 700;
}
.pm-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.pm-badge-rec {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
}
.pm-badge-opt {
    background: var(--surface-3, rgba(255,255,255,0.06));
    color: var(--text-muted);
}
.pm-counter {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.pm-counter.is-over {
    color: #ef4444;
    font-weight: 600;
}
.pm-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.pm-hint-muted {
    opacity: 0.7;
}

/* Inputs */
.pm-input,
.pm-textarea {
    width: 100%;
    padding: 0.75rem 0.875rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.9rem;
    font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pm-input:focus,
.pm-textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.pm-textarea {
    resize: vertical;
    min-height: 110px;
    line-height: 1.5;
}
select.pm-input {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
}

/* Chip group */
.pm-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.pm-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.pm-chip i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    opacity: 0.75;
}
.pm-chip:hover {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--border));
    background: color-mix(in srgb, var(--accent) 5%, var(--surface-2, transparent));
}
.pm-chip.is-selected {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: var(--accent);
    color: var(--accent);
}
.pm-chip.is-selected i {
    opacity: 1;
}
.pm-chip-lg {
    flex: 1;
    min-width: 140px;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding: 1rem 1.125rem;
    border-radius: 12px;
    text-align: left;
}
.pm-chip-lg i {
    width: 20px;
    height: 20px;
    margin-bottom: 0.25rem;
}
.pm-chip-lg .pm-chip-main {
    font-weight: 700;
    font-size: 0.95rem;
}
.pm-chip-lg .pm-chip-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-weight: 400;
}
.pm-chip-lg.is-selected .pm-chip-sub {
    color: color-mix(in srgb, var(--accent) 80%, var(--text-muted));
}

/* Tag input */
.pm-tag-input {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.5rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 10px;
    min-height: 52px;
    cursor: text;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.pm-tag-input:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.pm-tag-list {
    display: contents;
}
.pm-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
}
.pm-tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: none;
    background: color-mix(in srgb, var(--accent) 20%, transparent);
    color: var(--accent);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s;
}
.pm-tag-remove:hover {
    background: var(--accent);
    color: #fff;
}
.pm-tag-entry {
    flex: 1;
    min-width: 160px;
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
    font-family: inherit;
}
.pm-tag-entry:focus {
    outline: none;
}

/* Summary card (step 3) */
.pm-summary {
    padding: 1rem 1.125rem;
    background: color-mix(in srgb, var(--accent) 6%, var(--surface-2, transparent));
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
    border-radius: 12px;
    margin-top: 0.5rem;
}
.pm-summary-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 0.75rem;
}
.pm-summary-title i {
    width: 16px;
    height: 16px;
}
.pm-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem 1.25rem;
}
@media (max-width: 500px) {
    .pm-summary-grid { grid-template-columns: 1fr; }
}
.pm-summary-grid > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.8rem;
}
.pm-summary-grid span {
    color: var(--text-muted);
}
.pm-summary-grid strong {
    color: var(--text);
    font-weight: 600;
    text-align: right;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ============================================================
   VOICE BANK — frases reales de cliente + anti-referencias persistentes
   ============================================================ */
.voice-bank-accordion {
    margin-top: 1.5rem;
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.06), rgba(99, 102, 241, 0.03));
    overflow: hidden;
}
.voice-bank-accordion > .form-advanced-summary i:first-child {
    color: #a855f7;
}
.voice-bank-body {
    padding: 1.25rem;
}
.voice-bank-intro {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem;
    margin-bottom: 1.25rem;
    border-radius: 10px;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.2);
}
.voice-bank-intro > i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: #a78bfa;
    margin-top: 2px;
}
.voice-bank-intro strong {
    display: block;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 0.375rem;
    font-weight: 700;
}
.voice-bank-intro p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.voice-bank-textarea {
    font-family: var(--font-mono, ui-monospace, 'SF Mono', Menlo, monospace) !important;
    font-size: 0.85rem !important;
    line-height: 1.6 !important;
}
.voice-bank-counter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    flex-wrap: wrap;
    gap: 0.5rem;
}
.voice-bank-counter span:first-child {
    font-weight: 700;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.voice-bank-counter span.is-good {
    color: #10b981;
}
.voice-bank-hint-tip {
    color: var(--text-muted);
    font-style: italic;
}

/* CTAs configurables */
.pm-ctas-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 0.5rem;
}
.pm-cta-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    gap: 0.625rem;
    align-items: flex-start;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2, rgba(255,255,255,0.02));
    transition: border-color 0.15s, background 0.15s;
}
.pm-cta-row:hover {
    border-color: var(--border-strong, var(--border));
}
.pm-cta-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 4px;
}
.pm-cta-fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}
.pm-cta-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.pm-cta-label {
    font-size: 0.72rem;
    color: var(--text-muted);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.pm-cta-row .pm-input {
    font-size: 0.85rem;
    padding: 0.5rem 0.625rem;
}
.pm-cta-remove {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.15s;
}
.pm-cta-remove:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.2);
}
.pm-cta-remove i {
    width: 16px;
    height: 16px;
}
.pm-cta-add {
    margin-top: 0.625rem;
    width: 100%;
    justify-content: center;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-style: dashed !important;
}
.pm-cta-add i {
    width: 16px;
    height: 16px;
}
@media (max-width: 500px) {
    .pm-cta-row {
        grid-template-columns: 24px 1fr;
        grid-template-rows: auto auto;
    }
    .pm-cta-remove {
        grid-column: 2;
        justify-self: end;
    }
}

/* Footer */
.pm-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2, var(--surface));
}
.pm-autosave {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--success, #10b981);
    opacity: 0;
    transition: opacity 0.3s;
}
.pm-autosave.is-visible {
    opacity: 1;
}
.pm-autosave i {
    width: 14px;
    height: 14px;
}
.pm-footer-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}
.pm-btn {
    padding: 0.625rem 1.25rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
    font-family: inherit;
}
.pm-btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--border);
}
.pm-btn-ghost:hover {
    background: var(--surface-3, rgba(255,255,255,0.04));
    color: var(--text);
}
.pm-btn-primary {
    background: var(--accent);
    color: #fff;
}
.pm-btn-primary:hover {
    background: var(--accent-hover, var(--accent));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.pm-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* =========================================================
   BRAND PICKER MODAL (bp-*)
   ========================================================= */
.bp-card {
    width: 100%;
    max-width: 480px;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    background: var(--surface);
}
.bp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.bp-title {
    margin: 0 0 0.25rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
}
.bp-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.bp-body {
    padding: 0.75rem;
    max-height: 60vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.bp-brand-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    padding: 0.75rem 0.875rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
    font-family: inherit;
}
.bp-brand-card:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--surface-2, transparent));
    transform: translateX(2px);
}
.bp-brand-logo {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-3, rgba(255,255,255,0.04));
}
.bp-brand-logo-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bp-brand-logo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.bp-brand-info {
    flex: 1;
    min-width: 0;
}
.bp-brand-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bp-brand-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.bp-brand-arrow {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: transform 0.15s;
}
.bp-brand-card:hover .bp-brand-arrow {
    color: var(--accent);
    transform: translateX(3px);
}

/* =========================================================
   HOME V2 - Rediseño completo del Inicio
   ========================================================= */
.home-wrap-v2 {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 2rem;
}

/* Tip diario strip */
.home-tip-strip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius: 10px;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.5;
}
.home-tip-strip-icon {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.home-tip-strip-icon i { width: 15px; height: 15px; }
.home-tip-strip-text strong {
    color: var(--accent);
    font-weight: 700;
    margin-right: 0.25rem;
}

/* Header saludo */
.home-header-v2 {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    padding: 0.25rem 0;
}
.home-header-v2 .home-greeting {
    margin: 0 0 0.25rem;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
}
.home-header-v2 .home-subtitle {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-transform: capitalize;
}
.home-admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--surface-2, rgba(255,255,255,0.04));
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.home-admin-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.home-admin-btn i { width: 14px; height: 14px; }
.home-admin-btn.hidden { display: none; }

/* ===== HERO Section (Anuncios Netflix style) ===== */
.home-hero-section {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.home-hero-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}
.home-hero-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}
.home-hero-title i { width: 18px; height: 18px; color: var(--accent); }
.home-hero-nav {
    display: flex;
    gap: 0.375rem;
}
.home-hero-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2, rgba(255,255,255,0.04));
    color: var(--text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.home-hero-nav-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.home-hero-nav-btn i { width: 16px; height: 16px; }

.home-hero-track-wrap {
    overflow: hidden;
    margin: 0 -0.25rem;
    padding: 0.25rem;
}
.home-hero-track {
    display: flex;
    gap: 0.875rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}
.home-hero-track::-webkit-scrollbar { height: 6px; }
.home-hero-track::-webkit-scrollbar-track { background: transparent; }
.home-hero-track::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 3px;
}

.home-hero-card {
    flex: 0 0 min(520px, 92%);
    scroll-snap-align: start;
    min-height: 240px;
    border-radius: 16px;
    padding: 1.75rem 1.75rem;
    position: relative;
    overflow: hidden;
    cursor: default;
    display: flex;
    align-items: flex-end;
    transition: transform 0.25s;
    border: 1px solid var(--border);
}
.home-hero-card:hover {
    transform: translateY(-3px);
}
.home-hero-card-content {
    position: relative;
    z-index: 2;
    max-width: 72%;
    color: #fff;
}
.home-hero-tag {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}
.home-hero-h3 {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.home-hero-sub {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.9);
    line-height: 1.45;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
.home-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    background: #fff;
    color: #0f172a;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.home-hero-cta:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-1px);
}
.home-hero-cta i { width: 14px; height: 14px; }

.home-hero-skeleton {
    flex: 0 0 min(520px, 92%);
    min-height: 240px;
    border-radius: 16px;
    background: linear-gradient(90deg, var(--surface-2, rgba(255,255,255,0.03)) 0%, var(--surface-3, rgba(255,255,255,0.06)) 50%, var(--surface-2, rgba(255,255,255,0.03)) 100%);
    background-size: 200% 100%;
    animation: home-skeleton-pulse 1.5s ease-in-out infinite;
}
@keyframes home-skeleton-pulse {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ===== Stats strip ===== */
.home-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.home-stat-chip {
    display: grid;
    grid-template-columns: 40px 1fr;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 12px;
    position: relative;
    overflow: hidden;
}
.home-stat-chip-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
}
.home-stat-chip-icon i { width: 18px; height: 18px; }
.home-stat-chip-body { min-width: 0; }
.home-stat-chip-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 0.125rem;
}
.home-stat-chip-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.home-stat-chip-value .home-stat-limit {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
    margin-left: 0.125rem;
}
.home-stat-chip .home-stat-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--surface-3, rgba(255,255,255,0.05));
}
.home-stat-chip .home-stat-bar-fill {
    height: 100%;
    background: var(--accent);
    transition: width 0.4s;
}

@media (max-width: 900px) {
    .home-stats-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Mi Biblioteca Hero Card ===== */
.home-library-hero {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 8%, var(--surface-2, transparent)) 0%, var(--surface-2, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s;
}
.home-library-hero:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 15%, transparent);
}
.home-library-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.home-library-hero-title {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.25rem;
}
.home-library-hero-title i { width: 20px; height: 20px; color: var(--accent); }
.home-library-hero-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
}
.home-library-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.home-library-hero-cta:hover {
    background: var(--accent-hover, var(--accent));
    transform: translateX(2px);
}
.home-library-hero-cta i { width: 14px; height: 14px; }

.home-library-hero-previews {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.625rem;
}
.home-library-thumb {
    aspect-ratio: 4 / 3;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.375rem;
    text-align: center;
    padding: 0.5rem;
    background: var(--surface-3, rgba(255,255,255,0.04));
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
}
.home-library-thumb:hover {
    transform: scale(1.02);
    border-color: var(--accent);
}
.home-library-thumb.has-image {
    padding: 0;
    background: #000;
}
.home-library-thumb.has-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.home-library-thumb i {
    width: 18px;
    height: 18px;
    color: var(--accent);
    opacity: 0.8;
}
.home-library-thumb span {
    font-size: 0.65rem;
    color: var(--text-muted);
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.home-library-thumb.is-empty {
    background: transparent;
    border-style: dashed;
    cursor: default;
}
.home-library-thumb.is-empty:hover {
    transform: none;
    border-color: var(--border);
}
.home-library-thumb.is-empty i {
    opacity: 0.3;
}
.home-library-thumb.is-more {
    background: var(--accent);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    border-color: var(--accent);
}

.home-library-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0 1rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    padding-top: 0.25rem;
}
.home-library-hero-stats span strong {
    color: var(--text);
    font-weight: 700;
    margin-right: 0.25rem;
}

@media (max-width: 768px) {
    .home-library-hero-previews { grid-template-columns: repeat(3, 1fr); }
    .home-library-hero-previews .home-library-thumb:nth-child(n+4) { display: none; }
}

/* ===== Acciones rápidas grid ===== */
.home-actions-section {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}
.home-section-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}
.home-section-title i { width: 18px; height: 18px; color: var(--accent); }
.home-actions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.home-action-card {
    display: grid;
    grid-template-columns: 44px 1fr 20px;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1.125rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all 0.15s;
}
.home-action-card:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, var(--surface-2, transparent));
    transform: translateY(-2px);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 12%, transparent);
}
.home-action-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.home-action-card-icon i { width: 20px; height: 20px; }
.home-action-card-text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.home-action-card-text strong {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}
.home-action-card-text span {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.home-action-card-arrow {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: transform 0.15s;
}
.home-action-card:hover .home-action-card-arrow {
    color: var(--accent);
    transform: translateX(3px);
}

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

/* ===== Admin Announcements Modal ===== */
.ann-admin-card {
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
}
.ann-admin-body {
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ann-admin-actions {
    display: flex;
    justify-content: flex-end;
}
.ann-admin-actions .pm-btn i {
    width: 14px;
    height: 14px;
    margin-right: 0.25rem;
}
.ann-admin-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ann-admin-loading, .ann-admin-empty {
    text-align: center;
    padding: 2rem;
    color: var(--text-muted);
    font-size: 0.875rem;
}
.ann-admin-row {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    align-items: center;
    gap: 0.875rem;
    padding: 0.75rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 10px;
}
.ann-admin-thumb {
    width: 80px;
    height: 48px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--surface-3, rgba(255,255,255,0.04));
}
.ann-admin-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
}
.ann-admin-thumb-empty i { width: 20px; height: 20px; }
.ann-admin-info { min-width: 0; }
.ann-admin-row-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ann-admin-row-meta {
    display: flex;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
    align-items: center;
}
.ann-admin-status {
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.65rem;
}
.ann-admin-status.is-on { background: color-mix(in srgb, #10b981 15%, transparent); color: #10b981; }
.ann-admin-status.is-off { background: color-mix(in srgb, #64748b 15%, transparent); color: #94a3b8; }
.ann-admin-status.is-scheduled { background: color-mix(in srgb, #f59e0b 15%, transparent); color: #f59e0b; }
.ann-admin-status.is-expired { background: color-mix(in srgb, #ef4444 15%, transparent); color: #ef4444; }
.ann-admin-tag {
    padding: 2px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-weight: 600;
    font-size: 0.65rem;
}
.ann-admin-row-actions {
    display: flex;
    gap: 0.25rem;
}
.ann-admin-btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.ann-admin-btn-icon:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.ann-admin-btn-icon.ann-admin-btn-danger:hover {
    color: #ef4444;
    border-color: #ef4444;
    background: color-mix(in srgb, #ef4444 10%, transparent);
}
.ann-admin-btn-icon i { width: 14px; height: 14px; }

/* ===== Announcement Editor ===== */
.ann-editor-card {
    width: 100%;
    max-width: 640px;
    max-height: 92vh;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
}
.ann-editor-card .modal-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
}
.ann-image-upload {
    cursor: pointer;
    border: 2px dashed var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--surface-2, rgba(255,255,255,0.02));
    transition: border-color 0.15s;
}
.ann-image-upload:hover { border-color: var(--accent); }
.ann-image-preview {
    min-height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 1.5rem;
    color: var(--text-muted);
}
.ann-image-preview i { width: 28px; height: 28px; color: var(--accent); }
.ann-image-preview span { font-size: 0.875rem; font-weight: 500; }
.ann-image-preview small { font-size: 0.7rem; opacity: 0.7; }
.ann-image-preview img {
    display: block;
    width: 100%;
    max-height: 280px;
    object-fit: cover;
}
.ann-image-loading {
    padding: 2rem;
    text-align: center;
    color: var(--accent);
    font-size: 0.85rem;
}

.ann-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--text);
}
.ann-toggle input[type="checkbox"] {
    accent-color: var(--accent);
}

/* ===== Onboarding name modal ===== */
.onb-name-card {
    width: 100%;
    max-width: 460px;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
}
.onb-name-hero {
    padding: 2rem 1.75rem 1.25rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 18%, var(--surface-2, transparent)) 0%, var(--surface) 100%);
    text-align: center;
}
.onb-name-emoji {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    animation: onb-wave 1.5s ease-in-out infinite;
    transform-origin: 70% 70%;
    display: inline-block;
}
@keyframes onb-wave {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-18deg); }
    75% { transform: rotate(18deg); }
}
.onb-name-hero h2 {
    margin: 0 0 0.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text);
}
.onb-name-hero p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.45;
}
.onb-name-body {
    padding: 1.5rem 1.75rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.onb-name-input {
    text-align: center;
    font-size: 1.05rem;
    padding: 0.875rem 1rem;
}
.onb-name-save {
    width: 100%;
    padding: 0.875rem 1rem;
    font-size: 0.95rem;
}

/* =========================================================
   BIBLIOTECA V2 — Creator Studio
   ========================================================= */
.bib-v2-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Header */
.bib-v2-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.bib-v2-title {
    margin: 0 0 0.375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
}
.bib-v2-title i { width: 24px; height: 24px; color: var(--accent); }
.bib-v2-sub {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.bib-v2-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.bib-v2-btn-primary:hover {
    background: var(--accent-hover, var(--accent));
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent);
}
.bib-v2-btn-primary i { width: 16px; height: 16px; }

/* Toolbar */
.bib-v2-toolbar {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
}
.bib-v2-search {
    flex: 1;
    min-width: 220px;
    position: relative;
    display: flex;
    align-items: center;
}
.bib-v2-search i {
    position: absolute;
    left: 0.875rem;
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    pointer-events: none;
}
.bib-v2-search input {
    width: 100%;
    padding: 0.625rem 0.875rem 0.625rem 2.375rem;
    background: var(--surface-2, rgba(255,255,255,0.03));
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.875rem;
    font-family: inherit;
}
.bib-v2-search input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.bib-v2-filter {
    padding: 0.625rem 0.875rem;
    background: var(--surface-2, rgba(255,255,255,0.03));
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.85rem;
    cursor: pointer;
    font-family: inherit;
    min-width: 160px;
}
.bib-v2-filter:focus { outline: none; border-color: var(--accent); }
.bib-v2-toggle-fav {
    width: 40px;
    height: 40px;
    background: var(--surface-2, rgba(255,255,255,0.03));
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.bib-v2-toggle-fav i { width: 18px; height: 18px; }
.bib-v2-toggle-fav:hover { color: #fbbf24; border-color: #fbbf24; }
.bib-v2-toggle-fav.is-active {
    background: color-mix(in srgb, #fbbf24 15%, transparent);
    color: #fbbf24;
    border-color: #fbbf24;
}
.bib-v2-toggle-fav.is-active i {
    fill: #fbbf24;
}
.bib-v2-upload {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.bib-v2-upload:hover { border-color: var(--accent); color: var(--accent); }
.bib-v2-upload i { width: 16px; height: 16px; }

/* Type chips */
.bib-v2-typefilter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.bib-v2-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.425rem;
    padding: 0.5rem 0.875rem;
    background: var(--surface-2, rgba(255,255,255,0.03));
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.bib-v2-chip:hover { color: var(--text); border-color: var(--accent); }
.bib-v2-chip.is-active {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    border-color: var(--accent);
    color: var(--accent);
}
.bib-v2-chip i { width: 14px; height: 14px; }
.bib-v2-chip span {
    background: var(--surface-3, rgba(255,255,255,0.06));
    color: var(--text);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    text-align: center;
}
.bib-v2-chip.is-active span {
    background: var(--accent);
    color: #fff;
}

/* Hero CTA */
.bib-v2-hero-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.125rem 1.375rem;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 14%, var(--surface-2, transparent)) 0%, var(--surface-2, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius: 14px;
}
.bib-v2-hero-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.bib-v2-hero-icon i { width: 22px; height: 22px; }
.bib-v2-hero-body { flex: 1; min-width: 0; }
.bib-v2-hero-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.125rem;
}
.bib-v2-hero-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.bib-v2-hero-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.125rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    white-space: nowrap;
}
.bib-v2-hero-btn:hover { transform: translateX(3px); }
.bib-v2-hero-btn i { width: 14px; height: 14px; }

/* Sections */
.bib-v2-sections {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.bib-v2-section-header {
    margin-bottom: 0.75rem;
}
.bib-v2-section-header h3 {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.bib-v2-section-header h3 i { width: 16px; height: 16px; color: var(--accent); }
.bib-v2-section-count {
    background: var(--surface-3, rgba(255,255,255,0.06));
    color: var(--text-muted);
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    margin-left: 0.25rem;
    letter-spacing: 0;
    text-transform: none;
}
.bib-v2-section-grid {
    display: grid;
    gap: 0.875rem;
}
.bib-v2-grid-anuncios { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
.bib-v2-grid-imagenes { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.bib-v2-grid-ideas { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.bib-v2-grid-copyout { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.bib-v2-grid-escaletas { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.bib-v2-grid-ofertas { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.bib-v2-grid-estrategias { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.bib-v2-grid-hooksbank { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ============================================================
   BUYER PERSONAS — selector en wizard + gate en lluvia
   ============================================================ */
.pm-personas-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.625rem;
    margin-top: 0.5rem;
}
.pm-persona-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.875rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2, rgba(255,255,255,0.02));
    cursor: pointer;
    transition: all 0.18s ease;
}
.pm-persona-card:hover:not(.is-disabled) {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.05);
}
.pm-persona-card.is-checked {
    border-color: #8b5cf6;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(99, 102, 241, 0.08));
}
.pm-persona-card.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
.pm-persona-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.pm-persona-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}
.pm-persona-card-name {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.92rem;
    color: var(--text);
}
.pm-persona-card-name i {
    width: 16px;
    height: 16px;
    color: #a78bfa;
}
.pm-persona-card-perfil {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pm-persona-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--text-muted);
}
.pm-persona-card-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.18s;
}
.pm-persona-card.is-checked .pm-persona-card-check {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-color: transparent;
    color: #fff;
}
.pm-persona-card-check i {
    width: 14px;
    height: 14px;
    opacity: 0;
    transition: opacity 0.18s;
}
.pm-persona-card.is-checked .pm-persona-card-check i {
    opacity: 1;
}

.pm-personas-empty {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    border: 2px dashed var(--border);
    border-radius: 12px;
    background: var(--surface-2, rgba(255,255,255,0.02));
}
.pm-personas-empty-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
}
.pm-personas-empty-icon i {
    width: 20px;
    height: 20px;
    color: #a78bfa;
}
.pm-personas-empty-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.82rem;
    line-height: 1.4;
}
.pm-personas-empty-text strong {
    color: var(--text);
}
.pm-personas-empty-text span {
    color: var(--text-muted);
}
.pm-personas-empty-text em {
    color: #a78bfa;
    font-style: normal;
    font-weight: 600;
}

/* CTA inline cuando producto no tiene persona vinculada */
.hr-persona-cta {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    margin-top: 0.625rem;
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.10), rgba(99, 102, 241, 0.06));
}
.hr-persona-cta-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(139, 92, 246, 0.3);
}
.hr-persona-cta-icon i {
    width: 18px;
    height: 18px;
    color: #fff;
}
.hr-persona-cta-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.82rem;
    line-height: 1.4;
}
.hr-persona-cta-body strong {
    color: var(--text);
    font-weight: 600;
}
.hr-persona-cta-body span {
    color: var(--text-muted);
}
.hr-persona-cta-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}
.hr-persona-cta-btn i {
    width: 14px;
    height: 14px;
}
@media (max-width: 640px) {
    .hr-persona-cta {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
    .hr-persona-cta-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Help button al lado del label en hooks-rain */
.hr-persona-help {
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0.25rem;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
}
.hr-persona-help:hover { color: #a78bfa; }
.hr-persona-help i { width: 16px; height: 16px; }

/* Gate modal */
.hr-gate-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.hr-gate-card {
    width: 100%;
    max-width: 540px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 2rem;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
    position: relative;
    text-align: center;
}
.hr-gate-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.4);
}
.hr-gate-icon i {
    width: 30px;
    height: 30px;
    color: #fff;
}
.hr-gate-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.5rem;
}
.hr-gate-sub {
    font-size: 0.92rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0 0 1.5rem;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}
.hr-gate-options {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    text-align: left;
    margin-bottom: 1.25rem;
}
.hr-gate-option {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2, rgba(255,255,255,0.02));
    color: var(--text);
    cursor: pointer;
    transition: all 0.18s;
    text-align: left;
}
.hr-gate-option:hover {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.05);
    transform: translateY(-1px);
}
.hr-gate-option > i:first-child {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #a78bfa;
}
.hr-gate-option > i:last-child {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--text-muted);
    margin-left: auto;
}
.hr-gate-option div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}
.hr-gate-option strong {
    font-size: 0.95rem;
    font-weight: 700;
}
.hr-gate-option span {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.4;
}
.hr-gate-option.hr-gate-primary {
    border-color: rgba(139, 92, 246, 0.5);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(99, 102, 241, 0.08));
}
.hr-gate-footer {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
.hr-gate-skip {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0.5rem;
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: 0.55;
    transition: opacity 0.15s;
}
.hr-gate-skip:hover { opacity: 0.85; }
.hr-gate-card .modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
}

/* ============================================================
   BANCO DE HOOKS — bookmark, picker, biblioteca card
   ============================================================ */

/* Bookmark + acciones inline en cada hook de Lluvia */
.hr-hook-item {
    position: relative;
}
.hr-hook-actions {
    display: flex;
    gap: 0.375rem;
    align-items: center;
    flex-shrink: 0;
}
.hr-hook-action-btn,
.hr-hook-bookmark {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.hr-hook-action-btn:hover,
.hr-hook-bookmark:hover {
    background: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
    border-color: rgba(139, 92, 246, 0.3);
}
.hr-hook-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.hr-hook-bookmark.is-saved {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    border-color: transparent;
}
.hr-hook-action-btn i,
.hr-hook-bookmark i {
    width: 14px;
    height: 14px;
}
.hr-hook-bookmark i {
    width: 16px;
    height: 16px;
}
.hr-hook-action-btn .is-spinning {
    animation: hr-spin 0.8s linear infinite;
}
@keyframes hr-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Hook regenerándose — sutil overlay/dim */
.hr-hook-item.is-regenerating {
    opacity: 0.6;
    pointer-events: none;
}
.hr-hook-item.is-regenerating .hr-hook-text {
    font-style: italic;
}

/* Tags de estado: editado / regenerado */
.hr-hook-edited-tag,
.hr-hook-regen-tag {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    border-radius: 100px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-left: 0.5rem;
}
.hr-hook-edited-tag {
    background: rgba(251, 191, 36, 0.18);
    color: #f59e0b;
}
.hr-hook-regen-tag {
    background: rgba(16, 185, 129, 0.18);
    color: #10b981;
}

/* Editor inline */
.hr-hook-edit-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0;
}
.hr-hook-edit-textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border-radius: 8px;
    border: 1.5px solid rgba(168, 85, 247, 0.45);
    background: rgba(168, 85, 247, 0.06);
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.4;
    font-family: inherit;
    resize: vertical;
    min-height: 56px;
    outline: none;
    transition: border-color 0.15s;
}
.hr-hook-edit-textarea:focus {
    border-color: rgba(168, 85, 247, 0.8);
    background: rgba(168, 85, 247, 0.10);
}
.hr-hook-edit-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
}
.hr-hook-edit-cancel,
.hr-hook-edit-save {
    padding: 0.4rem 0.875rem;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    transition: all 0.15s;
}
.hr-hook-edit-cancel {
    background: transparent;
    color: var(--text-muted);
}
.hr-hook-edit-cancel:hover {
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}
.hr-hook-edit-save {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    border-color: transparent;
    color: #fff;
}
.hr-hook-edit-save:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.35);
}
.hr-hook-edit-save i {
    width: 14px;
    height: 14px;
}
.hr-pane-footer {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Trigger button "Usar hook de mi banco" en Ideas/CopyOut */
.hook-bank-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.12), rgba(99, 102, 241, 0.12));
    border: 1px dashed rgba(139, 92, 246, 0.4);
    border-radius: 8px;
    color: #a78bfa;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 0.5rem;
    transition: all 0.15s;
}
.hook-bank-trigger:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(99, 102, 241, 0.2));
    border-color: rgba(139, 92, 246, 0.6);
    color: #c4b5fd;
}
.hook-bank-trigger i {
    width: 14px;
    height: 14px;
}
.hook-bank-trigger i:last-child {
    margin-left: auto;
}

/* Modal Picker */
#hookBankModal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.hook-bank-modal-card {
    width: 100%;
    max-width: 720px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.hook-bank-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}
.hook-bank-modal-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.hook-bank-modal-title i {
    width: 20px;
    height: 20px;
    color: #a78bfa;
}
.hook-bank-modal-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
}
.hook-bank-modal-toolbar {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--border);
}
.hook-bank-modal-toolbar .form-input {
    flex: 1;
}
#hookBankFavToggle {
    width: 40px;
    flex-shrink: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#hookBankFavToggle.is-active {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: #000;
    border-color: transparent;
}
#hookBankFavToggle i {
    width: 16px;
    height: 16px;
}
.hook-bank-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.hook-bank-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.875rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2, transparent);
}
.hook-bank-modal-count {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* Hook items dentro del picker */
.hook-bank-item {
    display: flex;
    gap: 0.625rem;
    align-items: stretch;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2, rgba(255,255,255,0.02));
    transition: all 0.15s;
}
.hook-bank-item:hover {
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(139, 92, 246, 0.05);
}
.hook-bank-item-main {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.hook-bank-item-text {
    font-size: 0.92rem;
    color: var(--text);
    line-height: 1.4;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.hook-bank-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.hook-bank-tag, .hook-bank-tag-sub, .hook-bank-tag-angulo, .hook-bank-tag-nivel {
    font-size: 0.7rem;
    padding: 0.15rem 0.5rem;
    border-radius: 5px;
    font-weight: 600;
}
.hook-bank-tag {
    background: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
}
.hook-bank-tag-sub {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
}
.hook-bank-tag-angulo {
    background: rgba(251, 191, 36, 0.15);
    color: #fbbf24;
}
.hook-bank-tag-nivel {
    background: rgba(16, 185, 129, 0.15);
    color: #10b981;
}
.hook-bank-item-actions {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    align-items: stretch;
    flex-shrink: 0;
}
.hook-bank-fav, .hook-bank-use {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-muted);
    border-radius: 6px;
    cursor: pointer;
    padding: 0.375rem 0.625rem;
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: all 0.15s;
}
.hook-bank-fav i, .hook-bank-use i {
    width: 14px;
    height: 14px;
}
.hook-bank-fav.is-fav {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.3);
}
.hook-bank-fav.is-fav i {
    fill: #fbbf24;
}
.hook-bank-use {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: #fff;
    border-color: transparent;
}
.hook-bank-use:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Empty state del picker */
.hook-bank-empty {
    text-align: center;
    padding: 3rem 1rem;
}
.hook-bank-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(99, 102, 241, 0.15));
    display: flex;
    align-items: center;
    justify-content: center;
}
.hook-bank-empty-icon i {
    width: 24px;
    height: 24px;
    color: #a78bfa;
}
.hook-bank-empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.375rem;
}
.hook-bank-empty-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* Card de hook en biblioteca */
.bib-v2-card-hookbank {
    border-left: 3px solid #8b5cf6;
}
.bib-v2-card-hookbank .bib-v2-card-hook-large {
    font-style: italic;
    color: var(--text);
}
.bib-v2-card-hookbank .bib-v2-card-hook-large i {
    color: #a78bfa;
    fill: #a78bfa;
}

@media (max-width: 600px) {
    .hook-bank-item {
        flex-direction: column;
    }
    .hook-bank-item-actions {
        flex-direction: row;
        justify-content: flex-end;
    }
    .hook-bank-modal-card {
        max-height: 92vh;
    }
}

/* Cards */
.bib-v2-card {
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    position: relative;
}
.bib-v2-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 12%, transparent);
}
.bib-v2-card.is-fav::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 4px; height: 100%;
    background: #fbbf24;
    border-radius: 12px 0 0 12px;
}

.bib-v2-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.875rem 0.5rem;
    gap: 0.5rem;
}
.bib-v2-card-marca {
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bib-v2-card-date {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-left: auto;
}
.bib-v2-card-title {
    padding: 0.25rem 0.875rem 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.bib-v2-card-title i {
    width: 16px; height: 16px;
    vertical-align: -3px;
    margin-right: 0.375rem;
}
.bib-v2-card-sub {
    padding: 0.125rem 0.875rem 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    font-weight: 500;
}
.bib-v2-card-logo {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    object-fit: cover;
    border: 1px solid var(--border);
}
.bib-v2-card-oferta .bib-v2-card-title i {
    color: #f59e0b;
}
.bib-v2-card-estrategia .bib-v2-card-title i {
    color: #10b981;
}
.bib-v2-card-oferta,
.bib-v2-card-estrategia {
    padding-bottom: 0.5rem;
}
.bib-v2-card-oferta .bib-v2-card-tags,
.bib-v2-card-estrategia .bib-v2-card-tags {
    padding: 0.5rem 0.875rem 0;
}
.bib-v2-card-oferta .bib-v2-card-actions,
.bib-v2-card-estrategia .bib-v2-card-actions {
    padding: 0.5rem 0.875rem 0.625rem;
}

.bib-v2-card-hook,
.bib-v2-card-hook-large {
    padding: 0.5rem 0.875rem;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.45;
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
}
.bib-v2-card-hook-large {
    padding: 0.875rem;
    font-size: 0.9rem;
    font-weight: 500;
}
.bib-v2-card-hook i,
.bib-v2-card-hook-large i {
    width: 14px; height: 14px;
    color: #fbbf24;
    flex-shrink: 0;
    margin-top: 2px;
}
.bib-v2-card-copy {
    padding: 0 0.875rem 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bib-v2-card-preview {
    padding: 0.5rem 0.875rem;
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bib-v2-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem 0.875rem;
}
.bib-v2-mini-tag {
    padding: 2px 7px;
    border-radius: 6px;
    background: var(--surface-3, rgba(255,255,255,0.05));
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.bib-v2-user-tag {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    text-transform: none;
    letter-spacing: 0;
}
.bib-v2-card-actions {
    display: flex;
    gap: 0.25rem;
    padding: 0.625rem 0.875rem;
    margin-top: auto;
    flex-wrap: wrap;
    align-items: center;
}
.bib-v2-btn-sm,
.bib-v2-btn-primary-sm {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 7px;
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.bib-v2-btn-sm:hover { border-color: var(--accent); color: var(--accent); }
.bib-v2-btn-sm i { width: 13px; height: 13px; }
.bib-v2-btn-primary-sm {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.bib-v2-btn-primary-sm:hover {
    background: var(--accent-hover, var(--accent));
    transform: translateY(-1px);
}
.bib-v2-btn-primary-sm i { width: 13px; height: 13px; }
.bib-v2-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    margin-left: auto;
}
.bib-v2-icon-btn:hover {
    background: var(--surface-3, rgba(255,255,255,0.05));
    color: var(--text);
}
.bib-v2-icon-btn i { width: 14px; height: 14px; }
.bib-v2-icon-btn.is-fav { color: #fbbf24; }
.bib-v2-icon-btn.is-fav i { fill: #fbbf24; }
.bib-v2-icon-btn.bib-v2-btn-danger:hover { color: #ef4444; background: color-mix(in srgb, #ef4444 10%, transparent); }
.bib-v2-icon-btn-floating {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.bib-v2-icon-btn-floating:hover { background: rgba(0,0,0,0.8); }
.bib-v2-icon-btn-floating i { width: 14px; height: 14px; }
.bib-v2-icon-btn-floating.is-fav { color: #fbbf24; }
.bib-v2-icon-btn-floating.is-fav i { fill: #fbbf24; }

/* Anuncio card */
.bib-v2-card-anuncio {
    display: grid;
    grid-template-columns: 140px 1fr;
    min-height: 180px;
}
.bib-v2-card-anuncio-img {
    background: var(--surface-3, rgba(255,255,255,0.04));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.bib-v2-card-anuncio-img img { width: 100%; height: 100%; object-fit: cover; }
.bib-v2-card-anuncio-noimg { color: var(--text-muted); }
.bib-v2-card-anuncio-noimg i { width: 32px; height: 32px; opacity: 0.4; }
.bib-v2-card-anuncio-body {
    display: flex;
    flex-direction: column;
    padding: 0;
}

/* Image card */
.bib-v2-card-image {
    padding: 0;
}
.bib-v2-card-img-wrap {
    position: relative;
    aspect-ratio: 1;
    background: var(--surface-3, rgba(255,255,255,0.04));
    overflow: hidden;
}
.bib-v2-card-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.bib-v2-card-img-source {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
}
.bib-v2-card-image-body { padding: 0.625rem 0.75rem; }
.bib-v2-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.375rem;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Empty states */
.bib-v2-empty {
    grid-column: 1 / -1;
    padding: 2rem;
    text-align: center;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px dashed var(--border);
    border-radius: 12px;
}
.bib-v2-empty-icon-sm {
    width: 48px;
    height: 48px;
    margin: 0 auto 0.75rem;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bib-v2-empty-icon-sm i { width: 22px; height: 22px; }
.bib-v2-empty-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.75rem;
}
.bib-v2-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
.bib-v2-empty-btn:hover { background: var(--accent-hover, var(--accent)); }
.bib-v2-empty-btn i { width: 13px; height: 13px; }

.bib-v2-empty-all {
    padding: 3rem 1.5rem;
    text-align: center;
}
.bib-v2-empty-icon {
    width: 64px; height: 64px;
    margin: 0 auto 1rem;
    border-radius: 16px;
    background: var(--surface-3, rgba(255,255,255,0.04));
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
}
.bib-v2-empty-icon i { width: 28px; height: 28px; }
.bib-v2-empty-sub { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1rem; }

/* =========================================================
   WIZARD: ARMAR ANUNCIO (aa-*)
   ========================================================= */
.aa-card {
    width: 100%;
    max-width: 760px;
    max-height: 92vh;
    padding: 0;
    overflow: hidden;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    background: var(--surface);
}
.aa-header {
    padding: 1.25rem 1.5rem 0;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(180deg, var(--surface-2, var(--surface)) 0%, var(--surface) 100%);
}
.aa-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}
.aa-title {
    margin: 0 0 0.25rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}
.aa-title i { width: 20px; height: 20px; color: var(--accent); }
.aa-sub { font-size: 0.85rem; color: var(--text-muted); }
.aa-steps {
    display: flex;
    gap: 0.5rem;
    margin-bottom: -1px;
}
.aa-step {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 0.625rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.15s;
}
.aa-step:hover { color: var(--text); }
.aa-step.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.aa-step.is-done { color: #10b981; }
.aa-step.is-done .aa-step-num { background: #10b981; color: #fff; }
.aa-step.is-active .aa-step-num { background: var(--accent); color: #fff; }
.aa-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--surface-3, rgba(255,255,255,0.08));
    font-size: 0.7rem;
    font-weight: 700;
}
.aa-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
}
.aa-step-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.aa-h4 {
    margin: 0 0 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}
.aa-empty, .aa-empty-mini {
    padding: 1.5rem;
    text-align: center;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px dashed var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.85rem;
}
.aa-empty i { width: 32px; height: 32px; color: var(--accent); margin-bottom: 0.5rem; }
.aa-empty strong { display: block; color: var(--text); margin-bottom: 0.375rem; font-size: 0.95rem; }
.aa-empty p { margin: 0; }
.aa-empty a { color: var(--accent); text-decoration: underline; }

.aa-brand-grid, .aa-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.625rem;
}
.aa-brand-opt, .aa-product-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 0.625rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    text-align: center;
}
.aa-brand-opt:hover, .aa-product-opt:hover { border-color: var(--accent); }
.aa-brand-opt.is-selected, .aa-product-opt.is-selected {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: var(--accent);
    color: var(--accent);
}
.aa-brand-opt img {
    width: 48px; height: 48px; border-radius: 10px; object-fit: cover;
}
.aa-brand-placeholder {
    width: 48px; height: 48px; border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem; font-weight: 700;
}
.aa-brand-opt span, .aa-product-opt span {
    font-size: 0.8rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.aa-product-opt i { width: 20px; height: 20px; opacity: 0.75; }

.aa-hint {
    padding: 0.625rem 0.875rem;
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-radius: 8px;
    color: var(--text-muted);
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.aa-hint i { width: 14px; height: 14px; color: var(--accent); }

.aa-choice-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}
.aa-choice-tab {
    padding: 0.625rem 1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    margin-bottom: -1px;
}
.aa-choice-tab:hover { color: var(--text); }
.aa-choice-tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
.aa-choice-body { position: relative; }
.aa-choice-pane { display: none; }
.aa-choice-pane.is-active { display: block; }

.aa-hook-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
}
.aa-hook-opt, .aa-copy-opt {
    display: flex;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.aa-hook-opt:hover, .aa-copy-opt:hover { border-color: var(--accent); }
.aa-hook-opt.is-selected, .aa-copy-opt.is-selected {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: var(--accent);
}
.aa-hook-opt input, .aa-copy-opt input { margin-top: 3px; accent-color: var(--accent); }
.aa-hook-opt-body { flex: 1; }
.aa-hook-opt-text {
    font-size: 0.875rem;
    color: var(--text);
    line-height: 1.4;
    margin-bottom: 0.25rem;
}
.aa-hook-opt-meta {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.aa-generate-cta {
    padding: 2rem 1.5rem;
    text-align: center;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px dashed var(--border);
    border-radius: 12px;
}
.aa-generate-cta i { width: 32px; height: 32px; color: var(--accent); margin-bottom: 0.75rem; }
.aa-generate-cta p { color: var(--text-muted); font-size: 0.875rem; margin: 0 0 1rem; }

.aa-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.5rem;
    max-height: 340px;
    overflow-y: auto;
}
.aa-image-opt {
    aspect-ratio: 1;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    background: var(--surface-3, rgba(255,255,255,0.04));
    transition: all 0.15s;
}
.aa-image-opt img { width: 100%; height: 100%; object-fit: cover; }
.aa-image-opt:hover { transform: scale(1.02); }
.aa-image-opt.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }

.aa-upload-zone {
    padding: 2rem 1rem;
    text-align: center;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 2px dashed var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s;
}
.aa-upload-zone:hover { border-color: var(--accent); }
.aa-upload-zone i { width: 36px; height: 36px; color: var(--accent); margin-bottom: 0.625rem; }
.aa-upload-zone strong { display: block; color: var(--text); margin-bottom: 0.25rem; font-size: 0.9rem; }
.aa-upload-zone span { font-size: 0.75rem; color: var(--text-muted); }

.aa-upload-preview {
    margin-top: 0.75rem;
    border-radius: 10px;
    overflow: hidden;
}
.aa-upload-preview img { width: 100%; max-height: 240px; object-fit: cover; display: block; }

.aa-copy-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 320px;
    overflow-y: auto;
}

.aa-review {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.25rem;
}
.aa-review-media {
    aspect-ratio: 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--surface-3, rgba(255,255,255,0.04));
    display: flex;
    align-items: center;
    justify-content: center;
}
.aa-review-media img { width: 100%; height: 100%; object-fit: cover; }
.aa-review-noimg { color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; }
.aa-review-noimg i { width: 36px; height: 36px; opacity: 0.4; }
.aa-review-noimg span { font-size: 0.8rem; }
.aa-review-info { display: flex; flex-direction: column; gap: 0.625rem; min-width: 0; }
.aa-review-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; font-size: 0.85rem; padding: 0.375rem 0; border-bottom: 1px solid var(--border); }
.aa-review-row span { color: var(--text-muted); font-weight: 500; }
.aa-review-row strong { color: var(--text); font-weight: 600; text-align: right; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aa-review-row-block { flex-direction: column; align-items: flex-start; }
.aa-review-row-block strong, .aa-review-row-block div { text-align: left; max-width: 100%; white-space: normal; color: var(--text); font-weight: 500; }

.aa-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2, var(--surface));
}

@media (max-width: 700px) {
    .aa-review { grid-template-columns: 1fr; }
}

/* =========================================================
   MODAL PUBLICAR EN META (pm-meta-*)
   ========================================================= */
.pm-meta-card {
    width: 100%;
    max-width: 560px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 92vh;
    border-radius: 16px;
}
.pm-meta-body {
    padding: 1.25rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}
.pm-meta-intro {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin: 0 0 1.25rem;
    line-height: 1.5;
}
.pm-meta-options {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}
.pm-meta-option {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all 0.15s;
}
.pm-meta-option:hover { border-color: var(--accent); }
.pm-meta-option.is-active {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: var(--accent);
}
.pm-meta-option-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pm-meta-option-icon i { width: 18px; height: 18px; }
.pm-meta-option-body { flex: 1; min-width: 0; }
.pm-meta-option-body strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.125rem;
}
.pm-meta-option-body span {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.pm-meta-drafts { margin-top: 0.5rem; }
.pm-meta-drafts .pm-label { margin-bottom: 0.5rem; display: block; }
.pm-meta-drafts-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 280px;
    overflow-y: auto;
}
.pm-meta-draft-opt {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
}
.pm-meta-draft-opt:hover { border-color: var(--accent); }
.pm-meta-draft-opt.is-selected {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: var(--accent);
}
.pm-meta-draft-opt input { accent-color: var(--accent); }
.pm-meta-draft-thumb {
    width: 52px; height: 52px;
    border-radius: 8px;
    background: var(--surface-3, rgba(255,255,255,0.05));
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pm-meta-draft-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pm-meta-draft-noimg { color: var(--text-muted); }
.pm-meta-draft-noimg i { width: 20px; height: 20px; opacity: 0.5; }
.pm-meta-draft-info { min-width: 0; flex: 1; }
.pm-meta-draft-info strong {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-meta-draft-info span {
    font-size: 0.7rem;
    color: var(--text-muted);
}
.pm-meta-drafts-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px dashed var(--border);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}
.pm-meta-drafts-empty i { width: 28px; height: 28px; opacity: 0.5; }
.pm-meta-drafts-empty strong { color: var(--text); font-size: 0.9rem; }

/* =========================================================
   SIDE PANEL: Detalle de item de biblioteca
   ========================================================= */
.bib-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: flex-end;
    z-index: 2000;
    backdrop-filter: blur(2px);
}
.bib-detail-panel {
    width: 100%;
    max-width: 560px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    box-shadow: -8px 0 24px rgba(0,0,0,0.3);
    animation: bib-slide-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes bib-slide-in {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
.bib-detail-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}
.bib-detail-type {
    display: inline-block;
    padding: 2px 9px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.bib-detail-title {
    margin: 0 0 0.375rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.3;
}
.bib-detail-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-wrap: wrap;
}
.bib-detail-marca {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    padding: 2px 7px;
    border-radius: 6px;
    font-weight: 600;
}
.bib-detail-body {
    flex: 1;
    overflow-y: auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.bib-detail-img img {
    width: 100%;
    border-radius: 10px;
    display: block;
}
.bib-detail-block {
    padding: 0.875rem 1rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border-radius: 10px;
}
.bib-detail-label {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
}
.bib-detail-label i { width: 14px; height: 14px; color: var(--accent); }
.bib-detail-text {
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.55;
}
.bib-detail-pre {
    white-space: pre-wrap;
    font-family: inherit;
}
.bib-detail-usedin {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.bib-detail-usedin-item {
    padding: 0.375rem 0.75rem;
    background: var(--surface-3, rgba(255,255,255,0.04));
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.bib-detail-usedin-item:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.bib-detail-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--border);
    background: var(--surface-2, var(--surface));
}
.bib-detail-footer .pm-btn { font-size: 0.8rem; padding: 0.5rem 0.875rem; }
.bib-detail-footer .pm-btn i { width: 13px; height: 13px; margin-right: 0.25rem; }

@media (max-width: 768px) {
    .bib-detail-panel { max-width: 100%; }
}

/* Legacy: ocultar el kanban viejo */
.bib-kanban.hidden { display: none !important; }
.bib-count.hidden { display: none !important; }

/* =========================================================
   BUTTON SYSTEM V3 — Meta/Google-grade refinements
   (Se aplica SOBRE los botones ya existentes, no los reemplaza)
   ========================================================= */

/* Estados press consistentes (active) */
.pm-btn:active,
.bib-v2-btn-primary:active,
.home-library-hero-cta:active,
.home-hero-cta:active,
.home-action-card:active,
.bib-v2-btn-sm:active,
.bib-v2-btn-primary-sm:active {
    transform: scale(0.98);
    transition-duration: var(--dur-instant);
}

/* Disabled consistente (Material .38 opacity) */
button:disabled,
.pm-btn:disabled,
.bib-v2-btn-primary:disabled {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary CTA con elevation proper + hover lift sutil */
.pm-btn-primary,
.bib-v2-btn-primary {
    box-shadow: var(--elev-1);
    transition: transform var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard),
                background var(--dur-fast) var(--ease-standard);
}
.pm-btn-primary:hover:not(:disabled),
.bib-v2-btn-primary:hover:not(:disabled) {
    box-shadow: var(--elev-accent);
}

/* Ghost hover = state overlay, no pierde el color */
.pm-btn-ghost:hover:not(:disabled) {
    background: var(--state-hover);
    color: var(--text);
}

/* Icon inside button alignment consistent */
.pm-btn svg, .pm-btn i,
.bib-v2-btn-primary svg, .bib-v2-btn-primary i {
    flex-shrink: 0;
    transition: transform var(--dur-fast) var(--ease-standard);
}

/* =========================================================
   INPUT/TEXTAREA POLISH — Meta/Google feel
   ========================================================= */
.pm-input, .pm-textarea,
.bib-v2-search input,
.bib-v2-filter {
    font-family: inherit;
    transition: border-color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard),
                background-color var(--dur-fast) var(--ease-standard);
}
.pm-input:hover:not(:focus):not(:disabled),
.pm-textarea:hover:not(:focus):not(:disabled),
.bib-v2-filter:hover:not(:focus) {
    border-color: var(--border-strong);
}

/* Cursor + caret a brand color */
.pm-input, .pm-textarea, .bib-v2-search input { caret-color: var(--accent); }

/* =========================================================
   CARD HOVER SYSTEM — sutil, no saltón
   ========================================================= */
.home-action-card,
.home-library-hero,
.bp-brand-card,
.bib-v2-card,
.aa-brand-opt, .aa-product-opt,
.aa-image-opt, .aa-hook-opt, .aa-copy-opt,
.pm-meta-option, .pm-meta-draft-opt {
    transition: transform var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard),
                background-color var(--dur-fast) var(--ease-standard);
    will-change: transform;
}

/* =========================================================
   MODALES — Motion refinado (enter + backdrop)
   ========================================================= */
.modal-overlay {
    background: rgba(0, 0, 0, 0.56);
    backdrop-filter: blur(6px) saturate(140%);
    -webkit-backdrop-filter: blur(6px) saturate(140%);
    animation: modal-overlay-in var(--dur-base) var(--ease-decelerate);
}
@keyframes modal-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
.modal-card,
.pm-card, .aa-card, .pm-meta-card, .bp-card,
.ann-admin-card, .ann-editor-card, .onb-name-card {
    animation: modal-card-in var(--dur-slow) var(--ease-emphasized);
    transform-origin: center;
}
@keyframes modal-card-in {
    from { opacity: 0; transform: scale(0.96) translateY(12px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* =========================================================
   CLOSE BUTTONS (×) — tamaño touch + feedback
   ========================================================= */
.modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast) var(--ease-standard);
    flex-shrink: 0;
}
.modal-close:hover {
    background: var(--state-hover);
    color: var(--text);
}
.modal-close:active { transform: scale(0.92); transition-duration: var(--dur-instant); }

/* =========================================================
   LOADING / SKELETON SYSTEM — consistente
   ========================================================= */
@keyframes adsen-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton, .skeleton-block {
    background: linear-gradient(90deg,
        var(--surface-2) 0%,
        var(--surface-3) 50%,
        var(--surface-2) 100%);
    background-size: 200% 100%;
    animation: adsen-skeleton-shimmer 1.6s linear infinite;
    border-radius: var(--radius-md);
    color: transparent !important;
    pointer-events: none;
    user-select: none;
}

/* =========================================================
   BADGES — sistema consistente
   ========================================================= */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--tracking-wide);
}
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-success { background: var(--success-soft); color: var(--success); }
.badge-warning { background: var(--warning-soft); color: var(--warning); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-neutral { background: var(--state-hover); color: var(--text-muted); }

/* =========================================================
   TOOLTIPS (ligero, CSS-only)
   Usage: <button data-tooltip="Texto">…</button>
   ========================================================= */
[data-tooltip] { position: relative; }
[data-tooltip]::before,
[data-tooltip]::after {
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-fast) var(--ease-standard);
    position: absolute;
}
[data-tooltip]::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    background: var(--surface-3);
    color: var(--text);
    font-size: var(--text-xs);
    font-weight: 500;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    z-index: var(--z-tooltip);
    box-shadow: var(--elev-3);
}
[data-tooltip]:hover::before,
[data-tooltip]:focus-visible::before {
    opacity: 1;
}

/* =========================================================
   HEADINGS — jerarquía consistente producto-wide
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
}

/* =========================================================
   MICRO-INTERACCIONES DE CONFIANZA
   ========================================================= */

/* Icons dentro de botones al hover se animan ligeramente */
.pm-btn-primary:hover i[data-lucide="arrow-right"],
.bib-v2-btn-primary:hover i[data-lucide="arrow-right"],
.home-library-hero-cta:hover i[data-lucide="arrow-right"] {
    transform: translateX(2px);
}

/* Accent estrella activa efecto pop */
.bib-v2-icon-btn.is-fav i,
.bib-v2-icon-btn-floating.is-fav i {
    animation: star-pop var(--dur-slow) var(--ease-spring);
}
@keyframes star-pop {
    0% { transform: scale(0.8); }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* Chip activa: micro-squeeze */
.bib-v2-chip.is-active,
.bib-v2-toggle-fav.is-active {
    animation: chip-squeeze var(--dur-fast) var(--ease-emphasized);
}
@keyframes chip-squeeze {
    0% { transform: scale(1); }
    50% { transform: scale(0.97); }
    100% { transform: scale(1); }
}

/* =========================================================
   SIDEBAR & TOP NAV POLISH
   ========================================================= */
.sidebar-nav-item {
    transition: background-color var(--dur-fast) var(--ease-standard),
                color var(--dur-fast) var(--ease-standard);
}
.sidebar-nav-item:hover {
    background: var(--state-hover);
}

/* =========================================================
   SCROLL SNAP & MOMENTUM
   ========================================================= */
.home-hero-track { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

/* =========================================================
   PRINT-FRIENDLY (por si alguien imprime ofertas/copy)
   ========================================================= */
@media print {
    body { background: white; color: black; }
    .sidebar, .topbar, .modal-overlay { display: none !important; }
}

/* =========================================================
   HIGH CONTRAST MODE (Windows High Contrast / forced-colors)
   ========================================================= */
@media (forced-colors: active) {
    .pm-btn-primary, .bib-v2-btn-primary {
        border: 2px solid ButtonText;
    }
    *:focus-visible {
        outline: 3px solid Highlight !important;
        outline-offset: 2px;
    }
}

/* =========================================================
   ESTADOS "NEW" / "BETA" tags (para features nuevos)
   ========================================================= */
.tag-new, .tag-beta {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    margin-left: var(--space-1);
}
.tag-new { background: var(--success); color: #0a1a0f; }
.tag-beta { background: var(--info); color: #0a1020; }

/* =========================================================
   EMPTY-STATE SYSTEM CONSISTENTE
   ========================================================= */
.empty-state {
    padding: var(--space-12) var(--space-6);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}
.empty-state-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}
.empty-state-title {
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text);
}
.empty-state-desc {
    font-size: var(--text-base);
    color: var(--text-muted);
    max-width: 360px;
    line-height: var(--leading-normal);
}

/* =========================================================
   CARROUSEL BUILDER (cr-*)
   ========================================================= */
.cr-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cr-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.cr-title {
    margin: 0 0 0.375rem;
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
}
.cr-title i { width: 24px; height: 24px; color: var(--accent); }
.cr-sub {
    margin: 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.cr-header-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.cr-header-actions .pm-btn i { width: 14px; height: 14px; margin-right: 0.25rem; }

.cr-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: var(--elev-1);
}

.cr-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem;
}
.cr-form-col {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
@media (max-width: 900px) {
    .cr-form-grid { grid-template-columns: 1fr; }
}

.cr-chip-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}
.cr-chip {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    background: var(--surface-2, rgba(255,255,255,0.03));
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-standard);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: left;
    line-height: 1.25;
}
.cr-chip:hover { border-color: var(--border-hover); }
.cr-chip.is-selected {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: var(--accent);
    color: var(--accent);
}
.cr-chip i { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }
.cr-chip small { opacity: 0.7; font-size: 0.7rem; display: inline-block; margin-top: 2px; }

.cr-formato-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
.cr-formato {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1rem;
    background: var(--surface-2, rgba(255,255,255,0.03));
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-standard);
    font-family: inherit;
    text-align: left;
}
.cr-formato:hover { border-color: var(--border-hover); }
.cr-formato.is-selected {
    background: color-mix(in srgb, var(--accent) 8%, transparent);
    border-color: var(--accent);
}
.cr-formato-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cr-formato-icon i { width: 18px; height: 18px; }
.cr-formato-body { flex: 1; min-width: 0; }
.cr-formato-body strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.125rem;
}
.cr-formato-body span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.cr-form-footer {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
}
.cr-generate-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
}
.cr-generate-btn i { width: 16px; height: 16px; margin-right: 0.25rem; }

/* Loading state (re-usa ai-loading-card) */
.cr-loading-state { display: flex; justify-content: center; }
.cr-loading-state.hidden { display: none; }

/* Preview */
.cr-preview-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.cr-preview-panel.hidden { display: none; }

.cr-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 0.25rem;
}
.cr-preview-title {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}
.cr-preview-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.cr-slides-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.25rem;
}
.cr-slide-wrap { display: flex; flex-direction: column; gap: 0.5rem; }
.cr-slide-card {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--border);
    transition: all var(--dur-fast) var(--ease-standard);
    cursor: pointer;
    box-shadow: var(--elev-1);
}
.cr-slide-card:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--elev-3);
}
.cr-slide-card canvas {
    display: block;
    width: 100% !important;
    height: auto !important;
    cursor: pointer;
}
.cr-slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    gap: 0.375rem;
    padding: 0.5rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-standard);
    pointer-events: none;
}
.cr-slide-card:hover .cr-slide-overlay {
    opacity: 1;
    pointer-events: auto;
}
.cr-slide-action {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.625rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur-fast) var(--ease-standard);
}
.cr-slide-action:hover { background: rgba(255,255,255,0.25); }
.cr-slide-action i { width: 12px; height: 12px; }
.cr-slide-num {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Editor modal */
.cr-editor-card {
    width: 100%;
    max-width: 960px;
    max-height: 92vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
}
.cr-editor-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}
.cr-editor-left {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: sticky;
    top: 0;
}
.cr-editor-left canvas {
    max-width: 100%;
    max-height: 70vh;
    width: auto;
    height: auto;
    box-shadow: var(--elev-3);
}
.cr-editor-right {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.cr-editor-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    flex-wrap: wrap;
}
.cr-editor-actions .pm-btn i { width: 13px; height: 13px; margin-right: 0.25rem; }

@media (max-width: 768px) {
    .cr-editor-body { grid-template-columns: 1fr; }
    .cr-editor-left { position: static; }
}

/* Carrusel cards + detail */
.bib-v2-card-carrusel-cover {
    aspect-ratio: 4/5;
    background: #000;
}
.bib-detail-carrusel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.625rem;
}
.bib-detail-carrusel-slide {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--border);
}
.bib-detail-carrusel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.bib-detail-carrusel-slide span {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 2px 8px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
}

/* =========================================================
   CARROUSEL EDITOR WYSIWYG V2 (cr-ed-*)
   ========================================================= */
.cr-editor-card-v2 {
    width: 100%;
    max-width: 1240px;
    max-height: 96vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 16px;
    background: var(--surface);
}

.cr-ed-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2, var(--surface));
    gap: 0.75rem;
}
.cr-ed-topbar-left h3 {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
}
.cr-ed-topbar-left h3 i { width: 18px; height: 18px; color: var(--accent); }
.cr-ed-topbar-right {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}
.cr-ed-btn-sm {
    width: 34px; height: 34px;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cr-ed-btn-sm i { width: 16px; height: 16px; }

.cr-ed-layout {
    display: grid;
    grid-template-columns: 84px 1fr 320px;
    height: calc(96vh - 130px);
    min-height: 560px;
}

/* Left toolbar */
.cr-ed-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.625rem 0.375rem;
    border-right: 1px solid var(--border);
    background: var(--surface-2, rgba(255,255,255,0.02));
    overflow-y: auto;
}
.cr-ed-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.625rem 0.375rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.68rem;
    font-weight: 500;
    transition: all var(--dur-fast) var(--ease-standard);
}
.cr-ed-tool:hover {
    background: var(--state-hover);
    color: var(--text);
}
.cr-ed-tool.cr-ed-tool-active {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}
.cr-ed-tool i {
    width: 22px; height: 22px;
}
.cr-ed-tool span {
    line-height: 1;
}
.cr-ed-tool-divider {
    height: 1px;
    background: var(--border);
    margin: 0.375rem 0.25rem;
}

/* Center canvas area */
.cr-ed-canvas-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: var(--bg);
    gap: 0.75rem;
    overflow: auto;
}
.cr-ed-canvas-wrap {
    background: transparent;
    border-radius: 8px;
    box-shadow: var(--elev-4);
    overflow: hidden;
}
.cr-ed-canvas-wrap canvas {
    display: block;
}
.cr-ed-canvas-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--surface-2, rgba(255,255,255,0.04));
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.72rem;
}
.cr-ed-canvas-hint i { width: 14px; height: 14px; color: var(--accent); }

/* Right properties panel */
.cr-ed-props {
    border-left: 1px solid var(--border);
    background: var(--surface-2, rgba(255,255,255,0.02));
    overflow-y: auto;
    padding: 1rem;
}
.cr-ed-props-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.cr-ed-props-title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 0.25rem;
}
.cr-ed-props-title i { width: 14px; height: 14px; color: var(--accent); }
.cr-ed-props-group { display: flex; flex-direction: column; gap: 0.625rem; }
.cr-ed-props-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.cr-ed-props-row .pm-field { margin-bottom: 0; }
.cr-ed-props .pm-field label { font-size: 0.7rem; margin-bottom: 0.25rem; }
.cr-ed-props .pm-input, .cr-ed-props .pm-textarea { padding: 0.5rem 0.625rem; font-size: 0.8rem; }
.cr-ed-props .pm-textarea { min-height: 72px; }

/* Color input styling */
.cr-ed-color {
    padding: 2px !important;
    height: 36px !important;
    cursor: pointer;
}
.cr-ed-color::-webkit-color-swatch-wrapper { padding: 0; }
.cr-ed-color::-webkit-color-swatch { border: none; border-radius: 4px; }

/* Align buttons */
.cr-ed-align-btns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--surface-3, rgba(255,255,255,0.05));
    padding: 2px;
    border-radius: 8px;
}
.cr-ed-align {
    padding: 0.375rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast) var(--ease-standard);
}
.cr-ed-align:hover { color: var(--text); }
.cr-ed-align.is-active {
    background: var(--accent);
    color: #fff;
}
.cr-ed-align i { width: 14px; height: 14px; }

/* Layer actions */
.cr-ed-layer-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.25rem;
    padding-top: 0.625rem;
    border-top: 1px solid var(--border);
}
.cr-ed-layer-btn {
    padding: 0.5rem;
    background: var(--surface-3, rgba(255,255,255,0.04));
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast) var(--ease-standard);
}
.cr-ed-layer-btn:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.cr-ed-layer-btn.cr-ed-layer-danger:hover {
    color: var(--danger);
    border-color: var(--danger);
}
.cr-ed-layer-btn i { width: 14px; height: 14px; }

/* Background panel */
.cr-ed-bg-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--surface-3, rgba(255,255,255,0.05));
    padding: 2px;
    border-radius: 8px;
}
.cr-ed-bg-tab {
    padding: 0.425rem;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur-fast) var(--ease-standard);
}
.cr-ed-bg-tab:hover { color: var(--text); }
.cr-ed-bg-tab.is-active {
    background: var(--accent);
    color: #fff;
}

.cr-ed-bg-swatches {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.25rem;
    margin-top: 0.5rem;
}
.cr-ed-swatch {
    aspect-ratio: 1;
    border-radius: 6px;
    border: 2px solid var(--border);
    cursor: pointer;
    padding: 0;
    transition: all var(--dur-fast) var(--ease-standard);
}
.cr-ed-swatch:hover {
    transform: scale(1.1);
    border-color: var(--accent);
}

.cr-ed-upload-zone {
    padding: 1.25rem 0.75rem;
    text-align: center;
    background: var(--surface-3, rgba(255,255,255,0.03));
    border: 2px dashed var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease-standard);
}
.cr-ed-upload-zone:hover { border-color: var(--accent); }
.cr-ed-upload-zone i { width: 24px; height: 24px; color: var(--accent); display: block; margin: 0 auto 0.375rem; }
.cr-ed-upload-zone strong { display: block; font-size: 0.8rem; color: var(--text); margin-bottom: 0.125rem; }
.cr-ed-upload-zone span { font-size: 0.7rem; color: var(--text-muted); }

@media (max-width: 1100px) {
    .cr-ed-layout {
        grid-template-columns: 72px 1fr 280px;
    }
}
@media (max-width: 900px) {
    .cr-ed-layout {
        grid-template-columns: 1fr;
        grid-template-rows: 60px 1fr auto;
        height: auto;
    }
    .cr-ed-toolbar {
        flex-direction: row;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 0.5rem;
    }
    .cr-ed-tool-divider {
        width: 1px;
        height: 32px;
        margin: 0 0.375rem;
    }
    .cr-ed-props {
        border-left: none;
        border-top: 1px solid var(--border);
        max-height: 40vh;
    }
}

/* =========================================================
   TIPOGRAFÍA EDITORIAL — Sistema final
   Playfair Display: solo títulos grandes, hero, eyebrow editorial
   Inter: todo lo demás (UI, body, labels, buttons, etc.)
   ========================================================= */
:root {
    --font-serif: 'Playfair Display', 'Georgia', serif;
}

/* Aplicar serif EDITORIAL solo a títulos grandes y heros */
.t-editorial,
.hr-title,
.onb-title,
.bib-v2-title,
.home-create-title,
.home-greeting,
.t-display,
.t-headline {
    font-family: var(--font-serif);
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* Override: hook marks decorativos usan Playfair (no Georgia) */
.ideas-hook-mark-open,
.ideas-hook-mark-close {
    font-family: var(--font-serif) !important;
}

/* Override: monospace usa stack consistente */
.activity-modal-pre,
pre,
code,
.bib-detail-pre,
.hr-result-pre {
    font-family: var(--font-mono, 'SF Mono', 'JetBrains Mono', 'Fira Code', ui-monospace, monospace);
}

/* =========================================================
   MARCA ACTIVA EN SIDEBAR (sab-*)
   ========================================================= */
.sidebar-active-brand {
    margin: var(--space-2) var(--space-3);
    padding: var(--space-3);
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 10px;
    position: relative;
}
.sab-label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}
.sab-label i { width: 12px; height: 12px; color: var(--accent); }

.sab-selector {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-3, rgba(255,255,255,0.05));
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text);
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-standard);
}
.sab-selector:hover { border-color: var(--accent); }
.sab-selector i { width: 14px; height: 14px; color: var(--text-muted); flex-shrink: 0; }
.sab-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}
.sab-name.sab-empty { color: var(--text-muted); font-weight: 400; }

.sab-dropdown {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 0;
    right: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--elev-4);
    padding: var(--space-2);
    z-index: var(--z-dropdown);
    max-height: 320px;
    overflow-y: auto;
    animation: sab-dd-in var(--dur-fast) var(--ease-decelerate);
}
@keyframes sab-dd-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.sab-dd-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 0.85rem;
    transition: all var(--dur-fast) var(--ease-standard);
}
.sab-dd-item:hover { background: var(--state-hover); }
.sab-dd-item.is-active {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
}
.sab-dd-item img,
.sab-dd-placeholder {
    width: 28px; height: 28px; border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}
.sab-dd-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    font-weight: 700;
}
.sab-dd-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.sab-dd-item.is-active i {
    width: 14px; height: 14px;
    color: var(--accent);
}
.sab-dd-divider {
    height: 1px;
    background: var(--border);
    margin: var(--space-1) 0;
}
.sab-dd-manage {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-muted);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 500;
}
.sab-dd-manage:hover { background: var(--state-hover); color: var(--text); }
.sab-dd-manage i { width: 13px; height: 13px; }

.sab-dd-empty {
    padding: var(--space-3);
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
}
.sab-dd-create {
    display: block;
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-3);
    width: 100%;
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
}
.sab-dd-create:hover { background: var(--accent-hover, var(--accent)); }

/* =========================================================
   LLUVIA DE HOOKS (hr-*)
   ========================================================= */
.hr-wrap {
    max-width: 980px;
    margin: 0 auto;
    padding: var(--space-6) var(--space-6) var(--space-12);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.hr-header {
    text-align: center;
    margin-bottom: var(--space-2);
}
.hr-title {
    font-size: var(--text-4xl);
    font-weight: 800;
    color: var(--text);
    margin: 0 0 var(--space-2);
    line-height: 1.1;
    letter-spacing: -0.03em;
}
.hr-sub {
    margin: 0 auto;
    font-size: var(--text-md);
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 560px;
}

/* Steps indicator */
.hr-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 999px;
    margin: 0 auto;
}
.hr-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    transition: all var(--dur-fast) var(--ease-standard);
}
.hr-step.is-active {
    background: var(--accent);
    color: #fff;
}
.hr-step.is-active .hr-step-num { background: rgba(255,255,255,0.25); color: #fff; }
.hr-step.is-done { color: var(--success); }
.hr-step.is-done .hr-step-num { background: var(--success); color: #fff; }
.hr-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--surface-3, rgba(255,255,255,0.06));
    font-size: 0.7rem;
    font-weight: 700;
}
.hr-step-line {
    width: 28px;
    height: 1px;
    background: var(--border);
    flex-shrink: 0;
}
@media (max-width: 720px) {
    .hr-step-label { display: none; }
}

.hr-pane.hidden { display: none; }
.hr-pane { display: flex; flex-direction: column; gap: var(--space-4); }
.hr-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.hr-card-footer {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
    margin-top: var(--space-2);
}
.hr-generate-btn { padding: var(--space-3) var(--space-6); font-size: 0.95rem; }
.hr-generate-btn i { width: 16px; height: 16px; margin-right: 0.25rem; }

/* Pane head */
.hr-pane-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.hr-h3 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--text);
}
.hr-pane-sub { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
.hr-pane-head-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.hr-pane-head-actions .pm-btn i { width: 14px; height: 14px; margin-right: 0.25rem; }
.hr-counter {
    padding: var(--space-1) var(--space-3);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}

.hr-pane-footer {
    display: flex;
    justify-content: flex-end;
    padding: var(--space-4) 0;
}

/* Hooks list */
.hr-hooks-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.hr-hook-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease-standard);
}
.hr-hook-item:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
.hr-hook-item.is-selected {
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
    border-color: var(--accent);
}
.hr-hook-item.is-new::before {
    content: 'NUEVO';
    position: absolute;
}
.hr-hook-checkbox {
    display: flex;
    align-items: center;
}
.hr-hook-checkbox input[type="checkbox"] {
    width: 20px; height: 20px;
    accent-color: var(--accent);
    cursor: pointer;
}
.hr-hook-body { min-width: 0; }
.hr-hook-text {
    display: block;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
    margin-bottom: var(--space-1);
    cursor: pointer;
}
.hr-hook-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.7rem;
    color: var(--text-muted);
    flex-wrap: wrap;
}
.hr-hook-angulo {
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hr-hook-formato { font-weight: 500; }
.hr-hook-dot { opacity: 0.5; }
.hr-hook-new-tag {
    background: var(--success);
    color: #0a1a0f;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Format confirmation */
.hr-formats-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.hr-format-row {
    display: grid;
    grid-template-columns: 1fr 220px;
    gap: var(--space-4);
    align-items: center;
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}
@media (max-width: 700px) {
    .hr-format-row { grid-template-columns: 1fr; }
}
.hr-format-hook-text {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
    line-height: 1.35;
    margin-bottom: var(--space-1);
}
.hr-format-hook-angulo {
    font-size: 0.7rem;
    color: var(--accent);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.hr-format-suggested-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-1);
}

/* Results */
.hr-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.hr-result-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.hr-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.hr-result-formato-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.hr-result-actions {
    display: flex;
    gap: var(--space-1);
}
.hr-result-hook {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    background: color-mix(in srgb, var(--accent) 6%, var(--surface-2, transparent));
    border-left: 3px solid var(--accent);
    border-radius: 8px;
}
.hr-result-hook i { width: 16px; height: 16px; color: #fbbf24; flex-shrink: 0; margin-top: 3px; }
.hr-result-hook strong {
    flex: 1;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
    line-height: 1.4;
}
.hr-result-angulo {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    align-self: flex-start;
}
.hr-result-block {
    background: var(--surface-2, rgba(255,255,255,0.02));
    border-radius: 10px;
    padding: var(--space-3) var(--space-4);
}
.hr-result-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-2);
}
.hr-result-pre {
    white-space: pre-wrap;
    font-family: inherit;
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.6;
}
.hr-result-headline {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text);
}
.hr-result-meta { font-size: 0.78rem; color: var(--text-muted); }
.hr-result-tip {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: color-mix(in srgb, var(--info) 10%, transparent);
    border-radius: 8px;
    font-size: var(--text-sm);
    color: var(--text);
}
.hr-result-tip i { width: 14px; height: 14px; color: var(--info); }
.hr-result-why {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface-3, rgba(255,255,255,0.03));
    border-radius: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}
.hr-result-why i { width: 14px; height: 14px; color: var(--accent); }

.hr-result-slides {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.hr-result-slide {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.hr-result-slide-num {
    width: 32px; height: 32px;
    background: var(--accent);
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
}
.hr-result-slide-body strong { display: block; margin-bottom: var(--space-1); color: var(--text); }
.hr-result-slide-body p { margin: 0 0 var(--space-1); color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; }
.hr-result-slide-body ul { margin: var(--space-1) 0 0 var(--space-4); font-size: 0.85rem; color: var(--text); }
.hr-result-slide-body li { margin-bottom: 2px; line-height: 1.4; }

.hr-result-frames {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.hr-result-frame {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
}
.hr-result-frame-num {
    width: 24px; height: 24px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.75rem;
}

.hr-result-cortes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.hr-result-corte {
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
}
.hr-result-corte-time {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--accent);
    font-weight: 700;
}
.hr-result-corte-action,
.hr-result-corte-voz {
    font-size: 0.85rem;
    color: var(--text);
    line-height: 1.5;
    margin-bottom: var(--space-1);
}

/* Loading */
.hr-loading {
    display: flex;
    justify-content: center;
    padding: var(--space-12) 0;
}
.hr-loading.hidden { display: none; }

/* =========================================================
   ONBOARDING MULTI-STEP (onb-*) — Editorial style
   ========================================================= */
.onb-card {
    width: 100%;
    max-width: 560px;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
    background: var(--surface);
    box-shadow: var(--elev-5);
}
.onb-progress {
    padding: var(--space-4) var(--space-6) var(--space-3);
    border-bottom: 1px solid var(--border);
}
.onb-progress-bar {
    height: 4px;
    background: var(--surface-3, rgba(255,255,255,0.06));
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--space-2);
}
.onb-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent2, #f472b6) 100%);
    border-radius: 999px;
    transition: width var(--dur-slow) var(--ease-emphasized);
}
.onb-progress-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.onb-step {
    display: flex;
    flex-direction: column;
    animation: onb-step-in var(--dur-base) var(--ease-decelerate);
}
@keyframes onb-step-in {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: translateX(0); }
}

.onb-hero {
    padding: var(--space-8) var(--space-6) var(--space-4);
    text-align: center;
}
.onb-emoji {
    font-size: 3rem;
    margin-bottom: var(--space-3);
    display: inline-block;
    animation: onb-bounce 1.6s ease-in-out infinite;
}
@keyframes onb-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.onb-title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 var(--space-2);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.onb-sub {
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 auto;
    max-width: 380px;
}

.onb-body {
    padding: var(--space-2) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.onb-input-lg {
    text-align: center;
    font-size: 1.05rem;
    padding: var(--space-3) var(--space-4);
}

.onb-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--border);
    background: var(--surface-2, var(--surface));
}
.onb-footer .pm-btn { padding: var(--space-2) var(--space-4); font-size: 0.85rem; }

/* Step 4 — Quick paths */
.onb-quick-paths {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.onb-path {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all var(--dur-fast) var(--ease-standard);
}
.onb-path:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 5%, var(--surface-2, transparent));
    transform: translateY(-1px);
}
.onb-path-recommended {
    border-color: rgba(168, 85, 247, 0.4);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(99, 102, 241, 0.04));
}
.onb-path-recommended:hover {
    border-color: rgba(168, 85, 247, 0.7);
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.14), rgba(99, 102, 241, 0.08));
}
.onb-path-recommended .onb-path-icon i { color: #fff; }
.onb-buyer-paths {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.onb-path-arrow {
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--text-muted);
    flex-shrink: 0;
}
.onb-path-icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.onb-path-icon i { width: 18px; height: 18px; }
.onb-path strong {
    display: block;
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 2px;
}
.onb-path span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* =========================================================
   ¿QUÉ QUIERES CREAR HOY? — Home create section
   ========================================================= */
.home-create-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-2);
}
.home-create-header {
    text-align: center;
    margin-bottom: var(--space-2);
}
.home-create-title {
    font-family: var(--font-serif);
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 var(--space-2);
    letter-spacing: -0.02em;
    line-height: 1.15;
}
.home-create-sub {
    font-size: var(--text-md);
    color: var(--text-muted);
    margin: 0;
    line-height: 1.5;
}

.home-create-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
}
@media (max-width: 900px) {
    .home-create-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .home-create-grid { grid-template-columns: 1fr; }
}

.home-create-card {
    display: grid;
    grid-template-columns: 48px 1fr 20px;
    align-items: center;
    gap: var(--space-3);
    padding: 1.125rem 1.25rem;
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 14px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: all var(--dur-fast) var(--ease-standard);
}
.home-create-card:hover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--surface-2, transparent));
    transform: translateY(-2px);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 14%, transparent);
}
.home-create-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.home-create-card-icon i { width: 22px; height: 22px; }
.home-create-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.home-create-card-body strong {
    font-size: var(--text-md);
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
}
.home-create-card-body span {
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.home-create-card-arrow {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: transform var(--dur-fast) var(--ease-standard);
}
.home-create-card:hover .home-create-card-arrow {
    color: var(--accent);
    transform: translateX(3px);
}

/* =========================================================
   CREATIVE FLOW — Next Steps + Brand Context Bar
   Conexión entre generadores, evita re-llenar formularios
   ========================================================= */

/* ---------- Next Steps Bar (al final de cada output) ---------- */
.next-steps-bar {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 8%, var(--surface-2, transparent)) 0%,
        var(--surface-2, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
    border-radius: 14px;
    box-shadow: var(--elev-1);
    animation: ns-fade-in var(--dur-base) var(--ease-decelerate);
}
@keyframes ns-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.next-steps-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--space-3);
}
.next-steps-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-2);
}
.next-step-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    transition: all var(--dur-fast) var(--ease-standard);
}
.next-step-btn:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 18%, transparent);
}
.next-step-btn.is-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.next-step-btn.is-primary:hover {
    background: var(--accent-hover, var(--accent));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 35%, transparent);
}
.next-step-btn > i {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}
.next-step-btn span {
    flex: 1;
    line-height: 1.3;
}
.next-step-arrow {
    width: 14px !important;
    height: 14px !important;
    opacity: 0.6;
    transition: transform var(--dur-fast) var(--ease-standard);
}
.next-step-btn:hover .next-step-arrow {
    opacity: 1;
    transform: translateX(3px);
}

@media (max-width: 600px) {
    .next-steps-actions {
        grid-template-columns: 1fr;
    }
}

/* ---------- Brand Context Bar (sticky en cada generador) ---------- */
.brand-context-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 999px;
    margin-bottom: var(--space-4);
    transition: all var(--dur-fast) var(--ease-standard);
}
.brand-context-bar.is-empty {
    border-color: color-mix(in srgb, var(--warning) 40%, var(--border));
    background: color-mix(in srgb, var(--warning) 5%, transparent);
}
.bcb-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.8rem;
    flex: 1;
    min-width: 0;
}
.bcb-info i {
    width: 14px;
    height: 14px;
    color: var(--accent);
    flex-shrink: 0;
}
.bcb-label {
    color: var(--text-muted);
}
.bcb-name {
    color: var(--text);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bcb-divider {
    color: var(--text-muted);
    margin: 0 var(--space-1);
}
.bcb-producto {
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bcb-change {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur-fast) var(--ease-standard);
    flex-shrink: 0;
}
.bcb-change:hover {
    color: var(--accent);
    border-color: var(--accent);
}
.bcb-change i {
    width: 12px;
    height: 12px;
}

/* ---------- Brand Picker modal ---------- */
.cf-bp-card {
    width: 100%;
    max-width: 520px;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 16px;
    max-height: 92vh;
}
.cf-bp-body {
    padding: var(--space-3);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.cf-bp-empty {
    padding: var(--space-8);
    text-align: center;
    color: var(--text-muted);
}
.cf-bp-empty p {
    margin-bottom: var(--space-4);
}
.cf-bp-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.cf-bp-brand-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    transition: all var(--dur-fast) var(--ease-standard);
}
.cf-bp-brand-row:hover {
    border-color: var(--accent);
}
.cf-bp-brand.is-active .cf-bp-brand-row {
    background: color-mix(in srgb, var(--accent) 10%, transparent);
    border-color: var(--accent);
}
.cf-bp-brand-row img {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
}
.cf-bp-brand-ph {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.cf-bp-brand-info {
    flex: 1;
    min-width: 0;
}
.cf-bp-brand-info strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 2px;
}
.cf-bp-brand-info span {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.cf-bp-brand-row > i {
    width: 16px;
    height: 16px;
    color: var(--accent);
}
.cf-bp-products {
    padding: var(--space-2) var(--space-3);
    background: var(--surface-3, rgba(255,255,255,0.02));
    border-radius: 10px;
    margin-left: var(--space-4);
}
.cf-bp-products-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}
.cf-bp-products-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.cf-bp-product {
    padding: var(--space-1) var(--space-3);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
    transition: all var(--dur-fast) var(--ease-standard);
}
.cf-bp-product:hover {
    border-color: var(--accent);
    color: var(--accent);
}
.cf-bp-product.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}

/* =========================================================
   FORM ADVANCED — Accordion para campos opcionales
   ========================================================= */
.form-advanced {
    width: 100%;
    grid-column: 1 / -1;
    margin-top: var(--space-2);
    background: var(--surface-2, rgba(255,255,255,0.02));
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color var(--dur-fast) var(--ease-standard);
}
.form-advanced[open] {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}
.form-advanced-summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background var(--dur-fast) var(--ease-standard);
}
.form-advanced-summary::-webkit-details-marker {
    display: none;
}
.form-advanced-summary:hover {
    background: var(--state-hover);
}
.form-advanced-summary > i:first-child {
    width: 16px;
    height: 16px;
    color: var(--accent);
    flex-shrink: 0;
}
.form-advanced-summary > span:nth-child(2) {
    font-weight: 600;
    color: var(--text);
    font-size: 0.875rem;
}
.form-advanced-hint {
    color: var(--text-muted);
    font-size: 0.78rem;
    flex: 1;
}
.form-advanced-chevron {
    width: 16px;
    height: 16px;
    color: var(--text-muted);
    transition: transform var(--dur-fast) var(--ease-standard);
    flex-shrink: 0;
}
.form-advanced[open] .form-advanced-chevron {
    transform: rotate(180deg);
}
.form-advanced-body {
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    animation: form-adv-in var(--dur-base) var(--ease-decelerate);
}
@keyframes form-adv-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =========================================================
   GENERATOR CONNECT BANNER — sugerencia de uso entre generadores
   ========================================================= */
.generator-connect-banner {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 8%, var(--surface-2, transparent)) 0%,
        var(--surface-2, var(--surface)) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--border));
    border-radius: 12px;
}
.gcb-content {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.gcb-content > i {
    width: 20px;
    height: 20px;
    color: var(--accent);
    flex-shrink: 0;
    margin-top: 2px;
}
.gcb-content > div {
    flex: 1;
    min-width: 0;
}
.gcb-content strong {
    display: block;
    font-size: 0.9rem;
    color: var(--text);
    margin-bottom: 2px;
}
.gcb-content > div > span {
    font-size: 0.825rem;
    color: var(--text-muted);
    line-height: 1.5;
}
.gcb-link {
    display: inline;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--accent);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.gcb-link:hover {
    color: var(--accent-hover, var(--accent));
}

/* =========================================================
   PLANTILLAS GUIADAS — home templates section
   ========================================================= */
.home-templates-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin-top: var(--space-8);
}
.home-templates-header {
    text-align: center;
}
.home-templates-title {
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 var(--space-2);
    letter-spacing: -0.02em;
}
.home-templates-sub {
    font-size: var(--text-base);
    color: var(--text-muted);
    margin: 0;
}

.home-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3);
}

.home-template-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    color: var(--text);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    position: relative;
    overflow: hidden;
    transition: all var(--dur-base) var(--ease-standard);
    box-shadow: var(--elev-1);
}
.home-template-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--accent) 8%, transparent) 0%,
        transparent 50%);
    opacity: 0;
    transition: opacity var(--dur-base) var(--ease-standard);
    pointer-events: none;
}
.home-template-card:hover {
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--accent) 18%, transparent);
}
.home-template-card:hover::before { opacity: 1; }

.home-template-card-badge {
    display: inline-block;
    padding: 3px 10px;
    background: color-mix(in srgb, var(--accent) 15%, transparent);
    color: var(--accent);
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    align-self: flex-start;
    z-index: 1;
}
.home-template-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 1;
}
.home-tpl-icon-launch { background: linear-gradient(135deg, #7c5cfc 0%, #4f46e5 100%); }
.home-tpl-icon-organic { background: linear-gradient(135deg, #34d399 0%, #10b981 100%); }
.home-tpl-icon-validate { background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%); }
.home-tpl-icon-sales { background: linear-gradient(135deg, #ec4899 0%, #be185d 100%); }
.home-template-card-icon i { width: 28px; height: 28px; }

.home-template-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 0;
    z-index: 1;
}
.home-template-card-desc {
    font-size: 0.825rem;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.45;
    z-index: 1;
}
.home-template-card-steps {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-2, rgba(255,255,255,0.03));
    border-radius: 8px;
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.4;
    z-index: 1;
}
.home-template-card-steps i {
    width: 10px;
    height: 10px;
    opacity: 0.5;
    flex-shrink: 0;
}
.home-template-card-meta {
    display: flex;
    gap: var(--space-3);
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: auto;
    padding-top: var(--space-2);
    border-top: 1px solid var(--border);
    z-index: 1;
}
.home-template-card-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.home-template-card-meta i {
    width: 12px;
    height: 12px;
}

/* =========================================================
   Template intro modal
   ========================================================= */
.cf-tpl-intro-card {
    width: 100%;
    max-width: 520px;
    padding: var(--space-8) var(--space-6);
    text-align: center;
    border-radius: 18px;
    position: relative;
}
.cf-tpl-intro-card .modal-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
}
.cf-tpl-intro-emoji {
    font-size: 3rem;
    margin-bottom: var(--space-3);
}
.cf-tpl-intro-title {
    font-family: var(--font-serif);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 var(--space-3);
    letter-spacing: -0.02em;
}
.cf-tpl-intro-desc {
    font-size: 0.9rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 auto var(--space-5);
    max-width: 380px;
}
.cf-tpl-intro-steps {
    text-align: left;
    background: var(--surface-2, rgba(255,255,255,0.03));
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: var(--space-4);
    margin-bottom: var(--space-5);
}
.cf-tpl-intro-steps-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    margin-bottom: var(--space-2);
}
.cf-tpl-intro-steps-list {
    list-style: none;
    counter-reset: tpl-step;
    margin: 0;
    padding: 0;
}
.cf-tpl-intro-steps-list li {
    counter-increment: tpl-step;
    padding: var(--space-2) 0;
    padding-left: var(--space-8);
    position: relative;
    font-size: 0.875rem;
    color: var(--text);
    border-bottom: 1px solid var(--border);
}
.cf-tpl-intro-steps-list li:last-child { border-bottom: none; }
.cf-tpl-intro-steps-list li::before {
    content: counter(tpl-step);
    position: absolute;
    left: var(--space-2);
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background: var(--accent);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
}
.cf-tpl-intro-cta {
    width: 100%;
    padding: var(--space-3) var(--space-5);
    font-size: 0.95rem;
}

/* =========================================================
   Template progress bar (sticky abajo durante el flujo)
   ========================================================= */
.cf-tpl-progress-bar {
    position: fixed;
    bottom: var(--space-4);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: 999px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.4), 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
    z-index: 1500;
    max-width: calc(100vw - 2rem);
    animation: cf-tpl-pb-in var(--dur-slow) var(--ease-emphasized);
}
@keyframes cf-tpl-pb-in {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.cf-tpl-pb-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.cf-tpl-pb-info > i {
    width: 18px;
    height: 18px;
    color: var(--accent);
    flex-shrink: 0;
}
.cf-tpl-pb-info > div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.cf-tpl-pb-info strong {
    font-size: 0.8rem;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
}
.cf-tpl-pb-info span {
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cf-tpl-pb-actions {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}
.cf-tpl-pb-next,
.cf-tpl-pb-finish {
    padding: var(--space-2) var(--space-3);
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--dur-fast) var(--ease-standard);
}
.cf-tpl-pb-next:hover,
.cf-tpl-pb-finish:hover {
    background: var(--accent-hover, var(--accent));
}
.cf-tpl-pb-finish {
    background: var(--success, #10b981);
}
.cf-tpl-pb-finish:hover {
    background: #059669;
}
.cf-tpl-pb-exit {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 50%;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur-fast) var(--ease-standard);
}
.cf-tpl-pb-exit:hover {
    background: var(--state-hover);
    color: var(--text);
}

@media (max-width: 700px) {
    .cf-tpl-progress-bar {
        flex-wrap: wrap;
        bottom: var(--space-2);
        left: var(--space-2);
        right: var(--space-2);
        transform: none;
        border-radius: 12px;
    }
}

/* ============================================================
   WHATSAPP LEADS TRACKER — Conversions API
   Design tokens: WA-green #25D366 / #128C7E, neutral surface
   ============================================================ */

/* HERO ----------------------------------------------------- */
.wa-leads-hero {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background:
        radial-gradient(120% 140% at 0% 0%, rgba(37, 211, 102, 0.18) 0%, rgba(37, 211, 102, 0) 55%),
        radial-gradient(80% 100% at 100% 100%, rgba(99, 102, 241, 0.14) 0%, rgba(99, 102, 241, 0) 60%),
        rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(37, 211, 102, 0.22);
    border-radius: 18px;
    padding: 22px 24px;
    margin-bottom: 18px;
}
.wa-leads-hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
}
.wa-leads-hero-icon i { width: 28px; height: 28px; }
.wa-leads-hero-body { flex: 1; min-width: 0; }
.wa-leads-hero-title {
    margin: 0 0 6px 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary, #f1f5f9);
}
.wa-leads-hero-sub {
    margin: 0 0 14px 0;
    color: var(--text-secondary, #cbd5e1);
    font-size: 14px;
    line-height: 1.55;
    max-width: 720px;
}
.wa-leads-hero-sub strong { color: #25d366; font-weight: 600; }
.wa-leads-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.wa-leads-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    color: var(--text-secondary, #cbd5e1);
    font-weight: 500;
}
.wa-leads-hero-badge i { width: 14px; height: 14px; }

/* HOW-TO ACCORDION ----------------------------------------- */
.wa-leads-howto {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    margin-bottom: 18px;
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
}
.wa-leads-howto[open] {
    border-color: rgba(99, 102, 241, 0.35);
    background: rgba(99, 102, 241, 0.05);
}
.wa-leads-howto > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary, #f1f5f9);
    list-style: none;
    user-select: none;
    min-height: 48px;
}
.wa-leads-howto > summary::-webkit-details-marker { display: none; }
.wa-leads-howto > summary:hover { background: rgba(255, 255, 255, 0.03); }
.wa-leads-howto > summary > span { flex: 1; }
.wa-leads-howto-icon {
    width: 18px; height: 18px;
    color: #a5b4fc;
    flex-shrink: 0;
}
.wa-leads-howto-chev {
    width: 18px; height: 18px;
    color: var(--text-secondary, #94a3b8);
    transition: transform 0.2s;
    flex-shrink: 0;
}
.wa-leads-howto[open] .wa-leads-howto-chev,
.wa-leads-form-advanced[open] .wa-leads-howto-chev { transform: rotate(180deg); }
.wa-leads-howto-body {
    padding: 4px 18px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 4px;
    padding-top: 14px;
}
.wa-leads-howto-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-secondary, #cbd5e1);
}
.wa-leads-howto-step strong { color: var(--text-primary, #f1f5f9); }
.wa-leads-howto-step em { color: #25d366; font-style: normal; font-weight: 500; }
.wa-leads-howto-step code {
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: #fbbf24;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.wa-leads-howto-num {
    width: 22px; height: 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

/* TOOLBAR + STATS ------------------------------------------ */
.wa-leads-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 20px;
}
.wa-leads-toolbar-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    flex: 1;
    min-width: 0;
}
.wa-stat-mini {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 10px 14px;
}
.wa-stat-mini-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary, #94a3b8);
    font-weight: 500;
}
.wa-stat-mini-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}
.wa-stat-mini.is-revenue {
    border-color: rgba(37, 211, 102, 0.3);
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.1), rgba(37, 211, 102, 0.02));
}
.wa-stat-mini.is-revenue .wa-stat-mini-value {
    color: #25d366;
    font-size: 16px;
    line-height: 1.3;
}

/* CTA PRIMARIA --------------------------------------------- */
.wa-leads-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    transition: transform 0.15s, box-shadow 0.2s, filter 0.15s;
    box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
    white-space: nowrap;
}
.wa-leads-cta-primary:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 6px 18px rgba(37, 211, 102, 0.4);
}
.wa-leads-cta-primary:active { transform: translateY(0); }
.wa-leads-cta-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.wa-leads-cta-primary i { width: 16px; height: 16px; }

.wa-leads-btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-secondary, #cbd5e1);
    border-radius: 10px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    min-height: 44px;
    transition: background 0.15s, color 0.15s;
}
.wa-leads-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary, #f1f5f9);
}

/* FORM CARD ------------------------------------------------ */
.wa-leads-form-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(99, 102, 241, 0.3);
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 22px;
    box-shadow: 0 12px 30px -12px rgba(99, 102, 241, 0.25);
}
.wa-leads-form-card.hidden { display: none; }
.wa-leads-form-head { margin-bottom: 18px; }
.wa-leads-form-title {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
}
.wa-leads-form-helper {
    margin: 0;
    font-size: 13px;
    color: var(--text-secondary, #94a3b8);
    line-height: 1.5;
}
.wa-leads-form-helper strong { color: var(--text-primary, #f1f5f9); }

.wa-leads-form-section { margin-bottom: 18px; }
.wa-leads-form-section-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary, #94a3b8);
    font-weight: 600;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1);
}
.wa-leads-form-section-label i { width: 14px; height: 14px; color: #6366f1; }
.wa-leads-section-tag {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #94a3b8);
    font-weight: 500;
}
.wa-leads-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}
.wa-leads-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary, #94a3b8);
    font-weight: 500;
    min-width: 0;
}
.wa-leads-field > span {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--text-primary, #e2e8f0);
}
.wa-leads-field-hint, .wa-leads-field small {
    font-size: 11px;
    color: var(--text-secondary, #94a3b8);
    font-weight: 400;
    line-height: 1.4;
}
.wa-leads-field code {
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 10px;
    color: #fbbf24;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-weight: 400;
}
.wa-leads-field input,
.wa-leads-field select,
.wa-leads-field textarea {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    padding: 10px 12px;
    color: var(--text-primary, #f1f5f9);
    font-size: 14px;
    font-family: inherit;
    min-height: 44px;
    transition: border-color 0.15s, background 0.15s;
    font-variant-numeric: tabular-nums;
}
.wa-leads-field input:focus,
.wa-leads-field select:focus,
.wa-leads-field textarea:focus {
    outline: none;
    border-color: #25d366;
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.15);
}
.wa-leads-field textarea {
    resize: vertical;
    min-height: 64px;
    line-height: 1.5;
}
.wa-leads-field-full { grid-column: 1 / -1; }
.wa-leads-req {
    color: #ef4444;
    font-weight: 700;
    font-size: 14px;
    line-height: 1;
}

/* ADVANCED COLLAPSIBLE ------------------------------------- */
.wa-leads-form-advanced {
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    margin-bottom: 18px;
}
.wa-leads-form-advanced > summary {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #cbd5e1);
    list-style: none;
    min-height: 44px;
    user-select: none;
}
.wa-leads-form-advanced > summary::-webkit-details-marker { display: none; }
.wa-leads-form-advanced > summary > span { flex: 1; }
.wa-leads-form-advanced > summary > i:first-child {
    width: 16px; height: 16px;
    color: var(--text-secondary, #94a3b8);
}
.wa-leads-form-advanced > summary:hover { color: var(--text-primary, #f1f5f9); }
.wa-leads-form-advanced[open] {
    background: rgba(255, 255, 255, 0.04);
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.12);
}
.wa-leads-form-advanced-body {
    padding: 4px 16px 16px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
}

/* FORM ACTIONS --------------------------------------------- */
.wa-leads-form-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* EMPTY STATE ---------------------------------------------- */
.wa-leads-empty {
    text-align: center;
    padding: 50px 24px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 18px;
}
.wa-leads-empty.hidden { display: none; }
.wa-leads-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: rgba(37, 211, 102, 0.1);
    border: 1px solid rgba(37, 211, 102, 0.2);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.wa-leads-empty-icon i {
    width: 32px;
    height: 32px;
    color: #25d366;
}
.wa-leads-empty h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
}
.wa-leads-empty p {
    margin: 0 auto 18px auto;
    max-width: 480px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary, #cbd5e1);
}
.wa-leads-empty p strong { color: #25d366; font-weight: 600; }

/* GRID + CARDS --------------------------------------------- */
/* NOTA: este contenedor ahora aloja la TABLA real, no cards.
   Se usa display: block para que filtros + tabla se apilen verticalmente. */
.wa-leads-grid {
    display: block;
}
.wa-leads-grid:empty { display: none; }

.wa-lead-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    position: relative;
    overflow: hidden;
}
.wa-lead-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
}
.wa-lead-card:hover {
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
}
.wa-lead-card.is-won {
    background: linear-gradient(135deg, rgba(37, 211, 102, 0.08), rgba(255, 255, 255, 0.03));
    border-color: rgba(37, 211, 102, 0.3);
}
.wa-lead-card.is-won::before { background: #25d366; }
.wa-lead-card.is-lost {
    opacity: 0.55;
    border-color: rgba(239, 68, 68, 0.2);
}
.wa-lead-card.is-lost::before { background: #ef4444; }
.wa-lead-card.is-progress {
    border-color: rgba(251, 191, 36, 0.25);
}
.wa-lead-card.is-progress::before { background: #fbbf24; }
.wa-lead-card.is-reported {
    box-shadow: 0 0 0 1px rgba(37, 211, 102, 0.4) inset;
}

.wa-lead-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.wa-lead-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 4px 9px;
    border-radius: 999px;
    font-weight: 700;
}
.wa-lead-status i { width: 11px; height: 11px; }
.wa-lead-status.is-won { background: rgba(37, 211, 102, 0.18); color: #25d366; }
.wa-lead-status.is-lost { background: rgba(239, 68, 68, 0.15); color: #ef4444; }
.wa-lead-status.is-progress { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }

.wa-lead-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #f1f5f9);
    line-height: 1.3;
    word-break: break-word;
}
.wa-lead-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.wa-lead-phone, .wa-lead-email {
    font-size: 12px;
    color: var(--text-secondary, #94a3b8);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    word-break: break-all;
}
.wa-lead-phone i, .wa-lead-email i { width: 12px; height: 12px; flex-shrink: 0; }

.wa-lead-amount {
    font-size: 22px;
    font-weight: 700;
    color: #25d366;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.wa-lead-amount-currency {
    font-size: 12px;
    color: var(--text-secondary, #94a3b8);
    font-weight: 500;
    margin-left: 4px;
}

.wa-lead-notes {
    font-size: 12px;
    color: var(--text-secondary, #cbd5e1);
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 8px 10px;
    line-height: 1.5;
    border-left: 2px solid rgba(255, 255, 255, 0.1);
}

.wa-lead-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 5px;
    width: fit-content;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.wa-lead-tag i { width: 10px; height: 10px; }

.wa-lead-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.wa-lead-btn {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 7px 11px;
    font-size: 12px;
    color: var(--text-primary, #e2e8f0);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.15s, border-color 0.15s;
    min-height: 36px;
    font-weight: 500;
}
.wa-lead-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.18);
}
.wa-lead-btn i { width: 13px; height: 13px; }
.wa-lead-btn-primary {
    background: linear-gradient(135deg, #25d366, #128c7e);
    border-color: transparent;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(37, 211, 102, 0.25);
}
.wa-lead-btn-primary:hover {
    filter: brightness(1.08);
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}
.wa-lead-btn-danger { color: #fca5a5; }
.wa-lead-btn-danger:hover {
    background: rgba(239, 68, 68, 0.12);
    border-color: rgba(239, 68, 68, 0.3);
    color: #ef4444;
}

.wa-lead-reported {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(37, 211, 102, 0.12);
    border: 1px solid rgba(37, 211, 102, 0.3);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    color: #25d366;
    font-weight: 600;
    flex: 1;
    justify-content: center;
}
.wa-lead-reported i { width: 12px; height: 12px; }

/* RESPONSIVE ----------------------------------------------- */
@media (max-width: 640px) {
    .wa-leads-hero {
        flex-direction: column;
        padding: 18px;
    }
    .wa-leads-hero-icon { width: 44px; height: 44px; }
    .wa-leads-hero-title { font-size: 18px; }
    .wa-leads-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .wa-leads-cta-primary { justify-content: center; width: 100%; }
    .wa-leads-form-grid { grid-template-columns: 1fr; }
    .wa-leads-form-actions { flex-direction: column-reverse; }
    .wa-leads-form-actions > button { width: 100%; justify-content: center; }
    .wa-leads-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .wa-lead-card, .wa-leads-cta-primary, .wa-leads-howto-chev {
        transition: none;
    }
    .wa-lead-card:hover, .wa-leads-cta-primary:hover {
        transform: none;
    }
}

/* ============================================================
   PERFORMANCE PANEL — Métricas + Ventas WhatsApp unificado
   ============================================================ */

/* Hero KPIs combinados ------------------------------------- */
.perf-hero {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.perf-hero-card {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    overflow: hidden;
    transition: transform 0.2s, border-color 0.2s;
}
.perf-hero-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--accent-grad, linear-gradient(135deg, transparent, transparent));
    opacity: 0.08;
    pointer-events: none;
}
.perf-hero-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.14);
}
.perf-hero-spend { --accent-grad: linear-gradient(135deg, #6366f1, #8b5cf6); border-color: rgba(99, 102, 241, 0.25); }
.perf-hero-leads { --accent-grad: linear-gradient(135deg, #fbbf24, #f59e0b); border-color: rgba(251, 191, 36, 0.25); }
.perf-hero-sales { --accent-grad: linear-gradient(135deg, #25d366, #128c7e); border-color: rgba(37, 211, 102, 0.3); }
.perf-hero-roas { --accent-grad: linear-gradient(135deg, #f43f5e, #ec4899); border-color: rgba(244, 63, 94, 0.3); }

.perf-hero-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    background: var(--accent-grad);
    color: #fff;
}
.perf-hero-icon i { width: 18px; height: 18px; }
.perf-hero-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary, #94a3b8);
    font-weight: 600;
    margin-bottom: 4px;
}
.perf-hero-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.1;
    margin-bottom: 2px;
}
.perf-hero-sales .perf-hero-value { color: #25d366; }
.perf-hero-roas .perf-hero-value {
    background: linear-gradient(135deg, #f43f5e, #fbbf24);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.perf-hero-sub {
    font-size: 11px;
    color: var(--text-secondary, #94a3b8);
}

/* Switcher interno ----------------------------------------- */
.perf-switcher {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 18px;
    gap: 2px;
}
.perf-switch-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary, #94a3b8);
    padding: 8px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    transition: background 0.15s, color 0.15s;
}
.perf-switch-btn i { width: 15px; height: 15px; }
.perf-switch-btn:hover { color: var(--text-primary, #f1f5f9); }
.perf-switch-btn.active {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary, #f1f5f9);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.perf-switch-count {
    background: rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.perf-switch-btn.active .perf-switch-count {
    background: rgba(37, 211, 102, 0.25);
    color: #25d366;
}

/* Panes ---------------------------------------------------- */
.perf-pane { display: none; }
.perf-pane.active { display: block; animation: perfPaneIn 0.2s ease-out; }

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

/* Tabla — celdas Ventas WA / ROAS -------------------------- */
.metrics-table .t-roas-good {
    color: #25d366;
    font-weight: 700;
}
.metrics-table .t-roas-mid {
    color: #fbbf24;
    font-weight: 600;
}
.metrics-table .t-sub {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    color: var(--text-secondary, #94a3b8);
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 500;
    vertical-align: middle;
}

/* Responsive ----------------------------------------------- */
@media (max-width: 640px) {
    .perf-hero { grid-template-columns: repeat(2, 1fr); }
    .perf-hero-value { font-size: 18px; }
    .perf-switcher { width: 100%; }
    .perf-switch-btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .perf-pane.active { animation: none; }
    .perf-hero-card { transition: none; }
}

/* ============================================================
   PICK-FROM-LIST MODAL — selector pro para cuentas/pixels
   ============================================================ */
.wa-pick-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.18s ease-out;
    padding: 20px;
}
.wa-pick-overlay.is-open { opacity: 1; }
.wa-pick-overlay.is-closing { opacity: 0; }

.wa-pick-modal {
    background: linear-gradient(180deg, #1e1b2e 0%, #161423 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.6);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.18s ease-out;
    overflow: hidden;
}
.wa-pick-overlay.is-open .wa-pick-modal {
    transform: translateY(0) scale(1);
}

.wa-pick-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.wa-pick-head-icon {
    width: 40px; height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.wa-pick-head-icon i { width: 20px; height: 20px; }
.wa-pick-head-text { flex: 1; min-width: 0; }
.wa-pick-head-text h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: #f1f5f9;
}
.wa-pick-head-text p {
    margin: 3px 0 0 0;
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.4;
}
.wa-pick-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.wa-pick-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}
.wa-pick-close i { width: 18px; height: 18px; }

.wa-pick-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 80px;
}
.wa-pick-list::-webkit-scrollbar { width: 8px; }
.wa-pick-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

.wa-pick-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 12px 14px;
    color: #e2e8f0;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-color 0.12s;
    min-height: 48px;
}
.wa-pick-item:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.3);
}
.wa-pick-item.is-current {
    background: rgba(37, 211, 102, 0.08);
    border-color: rgba(37, 211, 102, 0.3);
}
.wa-pick-item-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.wa-pick-item-name {
    font-size: 14px;
    font-weight: 600;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wa-pick-item-sub {
    font-size: 11px;
    color: #94a3b8;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wa-pick-item-badge {
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.wa-pick-item-chev {
    width: 16px; height: 16px;
    color: #64748b;
    flex-shrink: 0;
}
.wa-pick-item:hover .wa-pick-item-chev { color: #a5b4fc; }

.wa-pick-footer {
    padding: 12px 20px 16px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    gap: 10px;
    position: relative;
    z-index: 2;
}

@media (max-width: 480px) {
    .wa-pick-modal { max-width: 100%; max-height: 90vh; border-radius: 14px; }
    .wa-pick-head { padding: 14px 16px; }
    .wa-pick-item { padding: 14px; min-height: 56px; }
}
@media (prefers-reduced-motion: reduce) {
    .wa-pick-overlay, .wa-pick-modal { transition: none; }
}

/* ============================================================
   OBJECTIVE-AWARE METRICS — badges, cells, dynamic KPIs
   ============================================================ */

/* Badge "Objetivo" en tabla — pintado por tipo */
.metrics-result-type {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, #94a3b8);
    white-space: nowrap;
}
.metrics-result-type i { width: 12px; height: 12px; }
/* Variantes coloreadas via --obj-color */
.metrics-result-type[class*="metrics-obj-"] {
    background: color-mix(in srgb, var(--obj-color, #94a3b8) 14%, transparent);
    border-color: color-mix(in srgb, var(--obj-color, #94a3b8) 35%, transparent);
    color: var(--obj-color, #94a3b8);
}
/* Fallback para navegadores sin color-mix */
@supports not (background: color-mix(in srgb, red, blue)) {
    .metrics-obj-sales   { background: rgba(37, 211, 102, 0.14); border-color: rgba(37, 211, 102, 0.35); color: #25d366; }
    .metrics-obj-leads   { background: rgba(251, 191, 36, 0.14); border-color: rgba(251, 191, 36, 0.35); color: #fbbf24; }
    .metrics-obj-msg     { background: rgba(34, 211, 238, 0.14); border-color: rgba(34, 211, 238, 0.35); color: #22d3ee; }
    .metrics-obj-traffic { background: rgba(165, 180, 252, 0.14); border-color: rgba(165, 180, 252, 0.35); color: #a5b4fc; }
    .metrics-obj-engage  { background: rgba(244, 114, 182, 0.14); border-color: rgba(244, 114, 182, 0.35); color: #f472b6; }
}

/* Celda Resultados — número grande + unidad pequeña debajo */
.metrics-results-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    gap: 2px;
}
.metrics-results-cell .t-strong {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.metrics-results-cell .t-sub {
    font-size: 10px;
    color: var(--text-secondary, #94a3b8);
    text-transform: lowercase;
    background: transparent;
    padding: 0;
    margin: 0;
    font-weight: 500;
}
.t-muted { color: var(--text-secondary, #94a3b8); }

/* Card vacía cuando no hay conversiones */
.metrics-kpi-empty {
    grid-column: 1 / -1;
    text-align: center;
}

/* Subtítulo más legible cuando combina datos (sub muy largo) */
.metrics-kpi-sub {
    line-height: 1.4;
}

/* ============================================================
   PERFORMANCE TOOLBAR — compacta (cuenta + período + refresh)
   ============================================================ */
.metrics-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 8px 12px;
    margin-bottom: 16px;
}
.metrics-toolbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 200px;
}
.metrics-toolbar-icon {
    width: 16px;
    height: 16px;
    color: #94a3b8;
    flex-shrink: 0;
}
.metrics-account-sel {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 10px;
    min-height: 36px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    max-width: 100%;
}
.metrics-account-sel:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}
.metrics-account-sel:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.3);
    border-color: rgba(99, 102, 241, 0.4);
}
.metrics-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ============================================================
   PROGRESS TOOLBAR — Reportados a Meta + CTA Nuevo lead
   ============================================================ */
.wa-prog-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.wa-prog-toolbar.is-empty .wa-prog-fill { width: 0% !important; }
.wa-prog-body { flex: 1; min-width: 0; }
.wa-prog-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.wa-prog-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
}
.wa-prog-title i { width: 16px; height: 16px; color: #25d366; }
.wa-prog-stats {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-variant-numeric: tabular-nums;
}
.wa-prog-stats strong {
    font-size: 18px;
    font-weight: 700;
    color: #25d366;
}
.wa-prog-divider {
    color: #475569;
    font-size: 14px;
}
.wa-prog-stats #waProgTotal {
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
}
.wa-prog-pct {
    margin-left: 8px;
    background: rgba(37, 211, 102, 0.15);
    color: #25d366;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 11px;
    font-weight: 700;
}
.wa-prog-track {
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.wa-prog-fill {
    height: 100%;
    background: linear-gradient(90deg, #25d366, #128c7e);
    border-radius: 999px;
    transition: width 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 12px rgba(37, 211, 102, 0.4);
}
.wa-prog-pending {
    margin-top: 7px;
    font-size: 11px;
    color: #94a3b8;
    line-height: 1.3;
}

/* ============================================================
   LEAD CARD V2 — overrides (jerarquía + acciones balanceadas)
   ============================================================ */
.wa-lead-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.wa-lead-date {
    margin-left: auto;
    font-size: 10px;
    color: #64748b;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    flex-shrink: 0;
}
.wa-lead-mini-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    color: #25d366;
    background: rgba(37, 211, 102, 0.12);
    border: 1px solid rgba(37, 211, 102, 0.25);
    border-radius: 5px;
    padding: 2px 6px;
}
.wa-lead-mini-badge i { width: 11px; height: 11px; }

.wa-lead-name-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 4px;
}
.wa-lead-name-row .wa-lead-name { font-size: 16px; }
.wa-lead-name-row .wa-lead-amount {
    font-size: 20px;
    line-height: 1.1;
    text-align: right;
    flex-shrink: 0;
}
.wa-lead-name-row .wa-lead-amount-currency {
    display: block;
    font-size: 10px;
    margin-left: 0;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wa-lead-contact {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin: 6px 0;
}
.wa-lead-contact-row {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.15s;
    min-height: 18px;
}
.wa-lead-contact-row > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.wa-lead-contact-row i {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
    color: #64748b;
}
a.wa-lead-contact-row:hover {
    color: #25d366;
}
a.wa-lead-contact-row:hover i { color: #25d366; }

/* Acciones balanceadas: CTA primaria fluida, iconos compactos */
.wa-lead-actions {
    display: flex;
    align-items: stretch;
    gap: 6px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.wa-lead-actions > .wa-lead-btn-primary,
.wa-lead-actions > .wa-lead-reported {
    flex: 1;
}
.wa-lead-btn-icon {
    width: 36px;
    flex-shrink: 0;
    padding: 0;
    justify-content: center;
}
.wa-lead-btn-icon i { width: 14px; height: 14px; }

.wa-lead-reported.is-muted {
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.2);
    color: #94a3b8;
    flex: 1;
}

/* Status pill compacto en header */
.wa-lead-header .wa-lead-status {
    padding: 3px 8px;
    font-size: 10px;
}

/* ============================================================
   PERFORMANCE HERO V2 — 5 KPIs (incluye Valor de conversión)
   ============================================================ */
.perf-hero {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.perf-hero-value-card { /* fallback if a card lacks accent */ }
.perf-hero-card.perf-hero-value {
    --accent-grad: linear-gradient(135deg, #06b6d4, #0891b2);
    border-color: rgba(6, 182, 212, 0.3);
}
.perf-hero-card.perf-hero-value .perf-hero-value {
    color: #06b6d4;
}
.perf-hero-card.perf-hero-sales {
    --accent-grad: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: rgba(251, 191, 36, 0.3);
}
.perf-hero-card.perf-hero-sales .perf-hero-value {
    color: #fbbf24;
}

/* Celda Valor en tabla — número grande + breakdown */
.metrics-value-cell {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    gap: 2px;
}
.metrics-value-cell .t-strong {
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.metrics-value-cell .t-sub {
    font-size: 10px;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
}

/* ROAS color tiers */
.metrics-table .t-roas-low {
    color: #f87171;
    font-weight: 600;
}

@media (max-width: 1100px) {
    .perf-hero { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .perf-hero-value { font-size: 20px; }
}
@media (max-width: 640px) {
    .perf-hero { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   EXPANDABLE CAMPAIGN ROWS — anuncios drill-down
   ============================================================ */

/* Fila clickable de campaña */
.metrics-camp-row {
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    position: relative;
}
.metrics-camp-row:hover {
    background: rgba(99, 102, 241, 0.06);
}
.metrics-camp-row:focus-visible {
    outline: none;
    background: rgba(99, 102, 241, 0.1);
    box-shadow: inset 2px 0 0 #6366f1;
}
.metrics-camp-row.is-expanded {
    background: rgba(99, 102, 241, 0.08);
}
.metrics-camp-row.is-expanded > td {
    border-bottom-color: transparent;
}

/* Celda nombre + chevron + count */
.metrics-camp-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.metrics-camp-chev {
    width: 14px;
    height: 14px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform 0.18s ease-out, color 0.15s;
}
.metrics-camp-row:hover .metrics-camp-chev {
    color: #a5b4fc;
}
.metrics-camp-row.is-expanded .metrics-camp-chev {
    transform: rotate(90deg);
    color: #6366f1;
}
.metrics-camp-name-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.metrics-camp-ads-count {
    background: rgba(99, 102, 241, 0.15);
    color: #a5b4fc;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 18px;
    text-align: center;
}
.metrics-camp-row.is-expanded .metrics-camp-ads-count {
    background: rgba(99, 102, 241, 0.3);
    color: #c7d2fe;
}

/* Sub-fila con tabla de anuncios */
.metrics-camp-ads-row {
    background: rgba(99, 102, 241, 0.03);
}
.metrics-camp-ads-td {
    padding: 0 !important;
    border-top: 1px solid rgba(99, 102, 241, 0.18);
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.05) 0%, rgba(99, 102, 241, 0.02) 100%);
}
.metrics-ads-wrap {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.28s ease-out, opacity 0.18s ease-out;
}
.metrics-camp-ads-row.is-open .metrics-ads-wrap {
    max-height: 1200px;
    opacity: 1;
}
.metrics-ads-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px 10px;
    font-size: 12px;
    font-weight: 600;
    color: #cbd5e1;
    text-transform: none;
    letter-spacing: 0;
}
.metrics-ads-head i {
    width: 14px;
    height: 14px;
    color: #6366f1;
}
.metrics-ads-head strong {
    color: #f1f5f9;
    font-weight: 700;
}
.metrics-ads-pill {
    background: rgba(99, 102, 241, 0.2);
    color: #a5b4fc;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-left: auto;
}
.metrics-ads-table-wrap {
    padding: 0 18px 16px;
    overflow-x: auto;
}
.metrics-ads-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.18);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.metrics-ads-table thead th {
    background: rgba(255, 255, 255, 0.02);
    color: #94a3b8;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.metrics-ads-table thead th.t-num { text-align: right; }
.metrics-ads-table tbody td {
    padding: 10px 12px;
    font-size: 12.5px;
    color: #e2e8f0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    font-variant-numeric: tabular-nums;
}
.metrics-ads-table tbody td.t-num { text-align: right; }
.metrics-ads-table tbody tr:last-child td { border-bottom: none; }
.metrics-ads-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.025);
}
.metrics-ad-name {
    display: flex !important;
    align-items: center;
    gap: 8px;
    max-width: 300px;
}
.metrics-ad-name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.metrics-ad-icon {
    width: 13px;
    height: 13px;
    color: #64748b;
    flex-shrink: 0;
}
.t-sub-inline {
    color: #94a3b8;
    font-size: 10px;
    margin-left: 3px;
}

/* Empty state cuando campaña no tiene ads */
.metrics-ads-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 22px;
    color: #94a3b8;
    font-size: 13px;
    background: rgba(0, 0, 0, 0.15);
}
.metrics-ads-empty i {
    width: 18px;
    height: 18px;
    color: #64748b;
}

@media (prefers-reduced-motion: reduce) {
    .metrics-camp-chev,
    .metrics-ads-wrap { transition: none; }
}

@media (max-width: 768px) {
    .metrics-ads-table-wrap { padding: 0 10px 12px; }
    .metrics-ads-head { padding: 10px 12px 8px; }
    .metrics-ad-name { max-width: 180px; }
}

/* ============================================================
   SEMÁFORO DE MÉTRICAS — pills con dot indicator
   ============================================================ */
.t-tier-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px 3px 7px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    border: 1px solid transparent;
    line-height: 1.2;
    white-space: nowrap;
}
.t-tier-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 0 0 2px transparent;
}
.t-tier-good {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.12);
    border-color: rgba(34, 197, 94, 0.3);
}
.t-tier-good .t-tier-dot {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}
.t-tier-mid {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.3);
}
.t-tier-mid .t-tier-dot {
    background: #fbbf24;
    box-shadow: 0 0 6px rgba(251, 191, 36, 0.5);
}
.t-tier-bad {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.3);
}
.t-tier-bad .t-tier-dot {
    background: #ef4444;
    box-shadow: 0 0 6px rgba(239, 68, 68, 0.55);
}
.t-tier-na {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.08);
    border-color: rgba(148, 163, 184, 0.15);
}
.t-tier-na .t-tier-dot {
    background: #475569;
}

/* ============================================================
   WA LEADS LIST VIEW — escalable para 100+ leads
   ============================================================ */

/* Toolbar (filtros + búsqueda + sort) */
/* Toolbar: filtros (fluid) | búsqueda (fixed) | sort (fixed) */
.wa-list-toolbar {
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
    width: 100%;
}
.wa-list-filters {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    flex: 1;
    min-width: 0;
    max-width: 100%;
}
.wa-list-filters::-webkit-scrollbar { display: none; }
.wa-list-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: none;
    color: #94a3b8;
    padding: 6px 9px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    min-height: 30px;
    white-space: nowrap;
    flex-shrink: 0;
}
.wa-list-filter i {
    width: 12px;
    height: 12px;
}
.wa-list-filter:hover { color: #e2e8f0; }
.wa-list-filter.is-active {
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
}
.wa-list-filter-count {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 999px;
    padding: 1px 5px;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 16px;
    text-align: center;
    color: #94a3b8;
}
.wa-list-filter.is-active .wa-list-filter-count {
    background: rgba(37, 211, 102, 0.22);
    color: #25d366;
}
.wa-list-tools {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}
.wa-list-search {
    position: relative;
    width: 240px;
    display: flex;
    align-items: center;
}
.wa-list-search i {
    position: absolute;
    left: 10px;
    width: 14px;
    height: 14px;
    color: #94a3b8;
    pointer-events: none;
}
.wa-list-search input {
    width: 100%;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 10px 8px 32px;
    color: #f1f5f9;
    font-size: 13px;
    min-height: 36px;
    transition: border-color 0.15s, background 0.15s;
}
.wa-list-search input:focus {
    outline: none;
    background: rgba(0, 0, 0, 0.35);
    border-color: rgba(37, 211, 102, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.12);
}
.wa-list-sort {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 7px 10px;
    color: #cbd5e1;
    font-size: 12.5px;
    cursor: pointer;
    min-height: 36px;
}
.wa-list-sort:focus {
    outline: none;
    border-color: rgba(99, 102, 241, 0.4);
}

/* Lista densa */
.wa-list {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.wa-row {
    display: grid;
    grid-template-columns: 4px 36px 1fr auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 14px 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background 0.12s;
    min-height: 56px;
    position: relative;
}
.wa-row:last-child { border-bottom: none; }
.wa-row:hover { background: rgba(255, 255, 255, 0.025); }
.wa-row:focus-visible {
    outline: none;
    background: rgba(99, 102, 241, 0.08);
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0.4);
}
.wa-row.is-reported .wa-row-name { /* no extra */ }
.wa-row.is-lost { opacity: 0.6; }

/* Status indicator (barra lateral 4px) */
.wa-row-status {
    height: 100%;
    width: 4px;
    background: rgba(255, 255, 255, 0.08);
    align-self: stretch;
}
.wa-row.is-won .wa-row-status     { background: #22c55e; }
.wa-row.is-progress .wa-row-status { background: #fbbf24; }
.wa-row.is-lost .wa-row-status     { background: #ef4444; }

/* Avatar */
.wa-row-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

/* Main column: name + meta */
.wa-row-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.wa-row-name-line {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.wa-row-name {
    font-size: 14px;
    font-weight: 600;
    color: #f1f5f9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 240px;
}
.wa-row-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 7px;
    border-radius: 999px;
}
.wa-row-status-pill i { width: 10px; height: 10px; }
.wa-row-status-pill.is-won      { background: rgba(34, 197, 94, 0.14); color: #22c55e; }
.wa-row-status-pill.is-progress { background: rgba(251, 191, 36, 0.14); color: #fbbf24; }
.wa-row-status-pill.is-lost     { background: rgba(239, 68, 68, 0.14); color: #ef4444; }
.wa-row-reported-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(37, 211, 102, 0.14);
    color: #25d366;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.wa-row-reported-pill i { width: 10px; height: 10px; }

.wa-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    font-size: 11.5px;
    color: #94a3b8;
}
.wa-row-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: inherit;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.wa-row-meta-item i { width: 11px; height: 11px; flex-shrink: 0; color: #64748b; }
a.wa-row-meta-item:hover {
    color: #25d366;
}
a.wa-row-meta-item:hover i { color: #25d366; }

/* Amount column */
.wa-row-amount-col {
    text-align: right;
    min-width: 80px;
    flex-shrink: 0;
}
.wa-row-amount {
    font-size: 15px;
    font-weight: 700;
    color: #25d366;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.wa-row-currency {
    font-size: 9px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
    font-weight: 500;
}
.wa-row-amount-muted {
    color: #475569;
    font-size: 14px;
    font-weight: 500;
}

/* Date column */
.wa-row-date {
    color: #64748b;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    text-align: right;
    flex-shrink: 0;
}

/* Actions column — icon buttons */
.wa-row-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.wa-row:hover .wa-row-actions,
.wa-row:focus-within .wa-row-actions { opacity: 1; }
.wa-row-action {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.wa-row-action i { width: 14px; height: 14px; }
.wa-row-action:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.1);
}
.wa-row-action.wa-row-report:hover {
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    border-color: transparent;
}
.wa-row-action.wa-row-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Footer (count) */
.wa-list-footer {
    text-align: center;
    color: #64748b;
    font-size: 11px;
    margin-top: 10px;
    font-variant-numeric: tabular-nums;
}

/* Empty state cuando filtros sin resultados */
.wa-list-empty-search {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    color: #94a3b8;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}
.wa-list-empty-search i {
    width: 32px; height: 32px;
    color: #475569;
}

/* Responsive */
@media (max-width: 880px) {
    .wa-row {
        grid-template-columns: 4px 32px 1fr auto;
        grid-template-rows: auto auto;
        padding: 10px 12px 10px 0;
    }
    .wa-row-amount-col {
        grid-column: 4;
        grid-row: 1;
    }
    .wa-row-date { display: none; }
    .wa-row-actions {
        grid-column: 2 / 5;
        grid-row: 2;
        opacity: 1;
        justify-content: flex-end;
    }
    .wa-list-toolbar { flex-direction: column; align-items: stretch; gap: 8px; }
    .wa-list-tools { width: 100%; justify-content: space-between; }
    .wa-list-search { width: auto; flex: 1; }
    .wa-list-filters { width: 100%; }
}
@media (max-width: 480px) {
    .wa-row-name { max-width: 160px; }
    .wa-row-meta-item { max-width: 140px; }
}

/* ============================================================
   DRILL-DOWN 3 NIVELES — Campaña → Conjunto → Anuncios
   ============================================================ */

/* Counter icon dentro del badge */
.metrics-camp-count-icon {
    width: 10px !important;
    height: 10px !important;
    display: inline-block;
    margin-left: 4px;
    opacity: 0.7;
    vertical-align: -1px;
}

/* ─── Nivel 2: ADSET (fila clickable dentro de sub-tabla nested) ─── */
.metrics-ads-table[data-nested-level="adset"] tbody tr.metrics-adset-row {
    cursor: pointer;
    transition: background 0.12s;
}
.metrics-ads-table[data-nested-level="adset"] tbody tr.metrics-adset-row:hover {
    background: rgba(34, 211, 238, 0.06);
}
.metrics-ads-table[data-nested-level="adset"] tbody tr.metrics-adset-row:focus-visible {
    outline: none;
    background: rgba(34, 211, 238, 0.1);
    box-shadow: inset 2px 0 0 #06b6d4;
}
.metrics-ads-table[data-nested-level="adset"] tbody tr.metrics-adset-row.is-expanded {
    background: rgba(34, 211, 238, 0.1);
}
.metrics-ads-table[data-nested-level="adset"] tbody tr.metrics-adset-row.is-expanded > td {
    border-bottom-color: transparent;
}

.metrics-adset-name {
    display: flex !important;
    align-items: center;
    gap: 7px;
    max-width: 320px;
    font-weight: 500;
}
.metrics-adset-name > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.metrics-adset-chev {
    width: 13px;
    height: 13px;
    color: #94a3b8;
    flex-shrink: 0;
    transition: transform 0.18s ease-out, color 0.15s;
}
.metrics-adset-row:hover .metrics-adset-chev { color: #06b6d4; }
.metrics-adset-row.is-expanded .metrics-adset-chev {
    transform: rotate(90deg);
    color: #06b6d4;
}
.metrics-adset-icon {
    width: 12px;
    height: 12px;
    color: #06b6d4;
    flex-shrink: 0;
    opacity: 0.7;
}
.metrics-adset-ads-count {
    background: rgba(34, 211, 238, 0.15);
    color: #67e8f9;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}

/* ─── Nivel 3: ADS dentro de un adset ─── */
.metrics-adset-ads-row {
    background: rgba(34, 211, 238, 0.025);
}
.metrics-adset-ads-td {
    padding: 0 !important;
    border-top: 1px solid rgba(34, 211, 238, 0.18);
    background: linear-gradient(180deg, rgba(34, 211, 238, 0.05) 0%, rgba(34, 211, 238, 0.02) 100%);
}
.metrics-adset-ads-wrap {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.28s ease-out, opacity 0.18s ease-out;
}
.metrics-adset-ads-row.is-open .metrics-adset-ads-wrap {
    max-height: 1200px;
    opacity: 1;
}

/* Header de nivel 3 — ligeramente más sutil */
.metrics-ads-head-l3 {
    padding: 10px 14px 8px 26px !important;
    font-size: 11px !important;
    color: #94a3b8 !important;
    border-left: 2px solid rgba(34, 211, 238, 0.4);
    margin-left: 14px;
}
.metrics-ads-head-l3 i {
    color: #06b6d4 !important;
    width: 12px !important;
    height: 12px !important;
}
.metrics-ads-head-l3 strong {
    color: #cbd5e1 !important;
}
.metrics-ads-head-l3 .metrics-ads-pill {
    background: rgba(34, 211, 238, 0.18) !important;
    color: #67e8f9 !important;
}

/* Tabla nivel 3 — más compacta y con tinte cyan */
.metrics-ads-table-wrap-l3 {
    padding: 0 14px 14px 26px;
}
.metrics-ads-table.metrics-ads-table-l3 {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(34, 211, 238, 0.12);
}
.metrics-ads-table.metrics-ads-table-l3 thead th {
    font-size: 9.5px;
    padding: 6px 10px;
}
.metrics-ads-table.metrics-ads-table-l3 tbody td {
    font-size: 12px;
    padding: 8px 10px;
}

@media (max-width: 768px) {
    .metrics-ads-table-wrap-l3 { padding: 0 8px 10px 14px; }
    .metrics-ads-head-l3 { padding-left: 18px !important; margin-left: 8px; }
}

/* ============================================================
   WA LEADS TABLE — tabla real con columnas y atribución por cuenta
   ============================================================ */

/* Empty states */
.wa-table-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 24px;
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    gap: 8px;
}
.wa-table-empty > i {
    width: 40px;
    height: 40px;
    color: #475569;
    background: rgba(99, 102, 241, 0.08);
    border-radius: 12px;
    padding: 8px;
    margin-bottom: 8px;
}
.wa-table-empty h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #f1f5f9;
}
.wa-table-empty p {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.5;
    max-width: 460px;
}
.wa-table-empty p strong { color: #25d366; }
.wa-table-empty p em { color: #a5b4fc; font-style: normal; font-weight: 500; }

/* Table wrapper */
.wa-table-wrap {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: auto;
    max-height: 70vh;
}

.wa-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.wa-table thead {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(20, 18, 32, 0.95);
    backdrop-filter: blur(8px);
}
.wa-table thead th {
    text-align: left;
    padding: 11px 14px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    user-select: none;
    white-space: nowrap;
}
.wa-table thead th.t-num { text-align: right; }
.wa-th-sortable {
    cursor: pointer;
    transition: color 0.12s;
}
.wa-th-sortable:hover { color: #e2e8f0; }
.wa-th-sort-active {
    width: 12px !important;
    height: 12px !important;
    margin-left: 4px;
    color: #25d366;
    vertical-align: -1px;
}
.wa-th-status { width: 130px; }
.wa-th-actions { width: 110px; }

/* Rows */
.wa-tbl-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
}
.wa-tbl-row:last-child { border-bottom: none; }
.wa-tbl-row:hover { background: rgba(255, 255, 255, 0.025); }
.wa-tbl-row:focus-visible {
    outline: none;
    background: rgba(99, 102, 241, 0.08);
    box-shadow: inset 2px 0 0 #6366f1;
}
.wa-tbl-row.is-lost { opacity: 0.55; }

/* Status pill (con dot lateral según estado) */
.wa-tbl-status-cell {
    padding: 11px 14px;
    border-left: 3px solid transparent;
}
.wa-tbl-row.is-won .wa-tbl-status-cell      { border-left-color: #22c55e; }
.wa-tbl-row.is-progress .wa-tbl-status-cell { border-left-color: #fbbf24; }
.wa-tbl-row.is-lost .wa-tbl-status-cell     { border-left-color: #ef4444; }

.wa-tbl-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.wa-tbl-status-pill i { width: 12px; height: 12px; }
.wa-tbl-status-pill.is-won      { background: rgba(34, 197, 94, 0.15); color: #22c55e; }
.wa-tbl-status-pill.is-progress { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.wa-tbl-status-pill.is-lost     { background: rgba(239, 68, 68, 0.15); color: #ef4444; }

/* Cells generic */
.wa-table tbody td {
    padding: 11px 14px;
    color: #e2e8f0;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}
.wa-table tbody td.t-num { text-align: right; }

/* Client column: avatar + name */
.wa-tbl-client-cell { min-width: 180px; }
.wa-tbl-client {
    display: flex;
    align-items: center;
    gap: 10px;
}
.wa-tbl-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.wa-tbl-name {
    font-weight: 600;
    color: #f1f5f9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}

/* Contact column */
.wa-tbl-contact-cell { min-width: 180px; }
.wa-tbl-phone, .wa-tbl-email {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #cbd5e1;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.wa-tbl-phone i, .wa-tbl-email i {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    color: #64748b;
}
.wa-tbl-email {
    color: #94a3b8;
    font-size: 11px;
    margin-top: 2px;
}
a.wa-tbl-phone:hover { color: #25d366; }
a.wa-tbl-phone:hover i { color: #25d366; }

/* Campaign column */
.wa-tbl-camp-cell { min-width: 140px; max-width: 220px; }
.wa-tbl-camp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: #cbd5e1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.wa-tbl-camp i {
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    color: #a5b4fc;
}

/* Amount column */
.wa-tbl-amount-cell { min-width: 100px; }
.wa-tbl-amount {
    font-weight: 700;
    color: #25d366;
    font-size: 13px;
    line-height: 1.1;
}
.wa-tbl-currency {
    display: inline-block;
    margin-left: 4px;
    font-size: 9px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* Reportado cell */
.wa-tbl-reported, .wa-tbl-pending {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.wa-tbl-reported i, .wa-tbl-pending i { width: 11px; height: 11px; }
.wa-tbl-reported { background: rgba(37, 211, 102, 0.14); color: #25d366; }
.wa-tbl-pending  { background: rgba(251, 191, 36, 0.12); color: #fbbf24; }

/* Date cell */
.wa-tbl-date-cell {
    color: #64748b;
    font-size: 11px;
    min-width: 60px;
}

/* Actions */
.wa-tbl-actions-cell {
    text-align: right;
    padding: 8px 12px !important;
}
.wa-tbl-actions {
    display: inline-flex;
    gap: 4px;
    opacity: 0.55;
    transition: opacity 0.15s;
}
.wa-tbl-row:hover .wa-tbl-actions,
.wa-tbl-row:focus-within .wa-tbl-actions { opacity: 1; }
.wa-tbl-action {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: transparent;
    border: 1px solid transparent;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.wa-tbl-action i { width: 13px; height: 13px; }
.wa-tbl-action:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
    border-color: rgba(255, 255, 255, 0.1);
}
.wa-tbl-action.wa-tbl-report:hover {
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    border-color: transparent;
}
.wa-tbl-action.wa-tbl-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.3);
}

/* Footer */
.wa-list-footer strong { color: #25d366; }

/* Responsive: en mobile, ocultamos columnas menos críticas */
@media (max-width: 900px) {
    .wa-tbl-camp-cell,
    .wa-table thead th:nth-child(4) { display: none; }
}
@media (max-width: 720px) {
    .wa-tbl-contact-cell,
    .wa-table thead th:nth-child(3) { display: none; }
    .wa-tbl-date-cell,
    .wa-table thead th:nth-child(7) { display: none; }
}
@media (max-width: 520px) {
    .wa-table thead th { font-size: 10px; padding: 8px 10px; }
    .wa-table tbody td { padding: 9px 10px; }
    .wa-tbl-avatar { width: 26px; height: 26px; font-size: 10px; }
}

/* ============================================================
   CREATE PIXEL MODAL — UX cuando el usuario no tiene Pixel
   ============================================================ */
.wa-create-modal { max-width: 520px; }

.wa-create-body {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.wa-create-explainer {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wa-create-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 10px 12px;
    background: rgba(37, 211, 102, 0.05);
    border: 1px solid rgba(37, 211, 102, 0.15);
    border-radius: 10px;
}
.wa-create-step-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(37, 211, 102, 0.15);
    color: #25d366;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wa-create-step-icon i { width: 16px; height: 16px; }
.wa-create-step strong {
    display: block;
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 2px;
}
.wa-create-step span {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.5;
}

.wa-create-name-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}
.wa-create-name-field span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    font-weight: 600;
}
.wa-create-name-field input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    padding: 10px 12px;
    color: #f1f5f9;
    font-size: 13px;
    min-height: 40px;
    transition: border-color 0.15s, background 0.15s;
}
.wa-create-name-field input:focus {
    outline: none;
    border-color: rgba(37, 211, 102, 0.5);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.12);
}

.wa-create-footer { gap: 10px; }
.wa-create-footer .wa-leads-cta-primary:disabled {
    cursor: wait;
}

.wa-spin {
    animation: waSpinAnim 0.9s linear infinite;
}
@keyframes waSpinAnim {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .wa-spin { animation: none; }
}

/* ============================================================
   INSPO LAB V2 — Analizador de Anuncios premium
   ============================================================ */

/* ─── HERO V2 ─── */
.inspo-hero-v2 {
    position: relative;
    background: linear-gradient(140deg, rgba(99, 102, 241, 0.15) 0%, rgba(168, 85, 247, 0.08) 50%, rgba(236, 72, 153, 0.06) 100%);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 22px;
    padding: 32px 28px;
    margin-bottom: 18px;
    overflow: hidden;
}
.inspo-hero-glow {
    position: absolute;
    top: -50%;
    right: -10%;
    width: 50%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(168, 85, 247, 0.18) 0%, rgba(168, 85, 247, 0) 70%);
    pointer-events: none;
    filter: blur(40px);
}
.inspo-hero-content { position: relative; max-width: 720px; }
.inspo-hero-icon-v2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    margin-bottom: 14px;
    box-shadow: 0 12px 32px -8px rgba(99, 102, 241, 0.6);
}
.inspo-hero-icon-v2 i { width: 28px; height: 28px; }
.inspo-hero-title-v2 {
    margin: 0 0 10px 0;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #f1f5f9;
    background: linear-gradient(120deg, #f1f5f9 0%, #c7d2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.inspo-hero-sub-v2 {
    margin: 0 0 16px 0;
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1.55;
    max-width: 600px;
}
.inspo-hero-sub-v2 strong { color: #a5b4fc; font-weight: 600; }
.inspo-hero-badges-v2 {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.inspo-hero-badge-v2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    color: #cbd5e1;
    font-weight: 500;
}
.inspo-hero-badge-v2 i { width: 14px; height: 14px; color: #a5b4fc; }

/* ─── INPUT CARD V2 ─── */
.inspo-input-card-v2 {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 22px;
}
.inspo-input-shell {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 4px 4px 4px 16px;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.15s;
}
.inspo-input-shell:focus-within {
    border-color: rgba(168, 85, 247, 0.5);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.12);
}
.inspo-input-icon {
    width: 18px;
    height: 18px;
    color: #94a3b8;
    flex-shrink: 0;
}
.inspo-input-shell:focus-within .inspo-input-icon { color: #a855f7; }
.inspo-input-v2 {
    flex: 1;
    background: transparent;
    border: none;
    padding: 14px 12px;
    color: #f1f5f9;
    font-size: 15px;
    font-weight: 500;
    outline: none;
    min-width: 0;
}
.inspo-input-v2::placeholder { color: #64748b; }
.inspo-input-mode-badge {
    display: none;
    align-items: center;
    gap: 5px;
    background: rgba(168, 85, 247, 0.15);
    color: #c4b5fd;
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 9px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    margin-right: 6px;
}
.inspo-input-mode-badge i { width: 12px; height: 12px; }
.inspo-input-mode-badge[data-tone="good"] {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.3);
}

.inspo-input-hint {
    margin-top: 10px;
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.5;
    padding: 8px 12px;
    background: rgba(168, 85, 247, 0.06);
    border-left: 2px solid rgba(168, 85, 247, 0.4);
    border-radius: 4px;
}

/* Suggestion chips */
.inspo-suggest-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
}
.inspo-suggest-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #64748b;
    font-weight: 600;
    margin-right: 4px;
}
.inspo-suggest-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.1s;
}
.inspo-suggest-chip:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.4);
    color: #f1f5f9;
    transform: translateY(-1px);
}

/* Board chip + divider */
.inspo-suggest-divider {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.12);
    margin: 0 4px;
    flex-shrink: 0;
}
.inspo-board-chip {
    background: rgba(251, 191, 36, 0.08);
    border: 1px solid rgba(251, 191, 36, 0.22);
    color: #fbbf24;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}
.inspo-board-chip i { width: 13px; height: 13px; }
.inspo-board-chip:hover {
    background: rgba(251, 191, 36, 0.18);
    border-color: rgba(251, 191, 36, 0.45);
    color: #fde68a;
    transform: translateY(-1px);
}
.inspo-board-count {
    background: rgba(251, 191, 36, 0.25);
    color: #fde68a;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Anuncios Top chip */
.inspo-validated-chip {
    background: rgba(168, 85, 247, 0.08) !important;
    border-color: rgba(168, 85, 247, 0.22) !important;
    color: #a855f7 !important;
}
.inspo-validated-chip:hover {
    background: rgba(168, 85, 247, 0.18) !important;
    border-color: rgba(168, 85, 247, 0.45) !important;
    color: #c084fc !important;
}
.inspo-validated-count {
    background: rgba(168, 85, 247, 0.25);
    color: #c084fc;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

/* Mis Análisis chip */
.inspo-misanalisis-chip {
    background: rgba(6, 182, 212, 0.08) !important;
    border-color: rgba(6, 182, 212, 0.22) !important;
    color: #06b6d4 !important;
}
.inspo-misanalisis-chip:hover {
    background: rgba(6, 182, 212, 0.18) !important;
    border-color: rgba(6, 182, 212, 0.45) !important;
    color: #22d3ee !important;
}

/* Validated Board */
.inspo-validated-board {
    margin-top: 20px;
    animation: fadeInUp 0.3s ease;
}
.inspo-validated-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}
.inspo-validated-header .inspo-back-btn {
    flex-shrink: 0;
}
.inspo-validated-header-text h3 {
    font-size: 18px;
    font-weight: 700;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}
.inspo-validated-header-text h3 i {
    width: 20px;
    height: 20px;
    color: #a855f7;
}
.inspo-validated-header-text p {
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    margin: 2px 0 0;
}
.inspo-validated-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.inspo-validated-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px;
    padding: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.inspo-validated-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(168, 85, 247, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.inspo-validated-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.inspo-validated-card-brand {
    font-size: 12px;
    font-weight: 600;
    color: #a855f7;
    background: rgba(168, 85, 247, 0.1);
    padding: 2px 8px;
    border-radius: 6px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inspo-validated-card-score {
    font-size: 13px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
}
.inspo-validated-card-score.is-good { background: rgba(34,197,94,0.12); color: #4ade80; }
.inspo-validated-card-score.is-mid { background: rgba(251,191,36,0.12); color: #fbbf24; }
.inspo-validated-card-score.is-low { background: rgba(239,68,68,0.12); color: #f87171; }
.inspo-validated-card-hook {
    font-size: 14px;
    line-height: 1.45;
    color: #e2e8f0;
    display: flex;
    gap: 6px;
}
.inspo-validated-card-hook i {
    width: 14px;
    height: 14px;
    color: #fbbf24;
    flex-shrink: 0;
    margin-top: 3px;
}
.inspo-validated-card-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.inspo-validated-card-tag {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(99,102,241,0.12);
    color: #818cf8;
}
.inspo-validated-card-tag.is-subtle {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.45);
}
.inspo-validated-card-cta {
    margin-top: auto;
    padding-top: 6px;
}
.inspo-validated-card-btn {
    background: transparent;
    border: 1px solid rgba(168, 85, 247, 0.25);
    color: #c084fc;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}
.inspo-validated-card-btn:hover {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.45);
}
.inspo-validated-card-btn i { width: 13px; height: 13px; }

/* Admin validate button */
.inspo-validate-btn { color: #a855f7 !important; }
.inspo-validate-btn:hover { background: rgba(168, 85, 247, 0.1) !important; }

@media (max-width: 680px) {
    .inspo-validated-grid { grid-template-columns: 1fr; }
}

/* Client bar V2 */
.inspo-client-bar-v2 {
    margin-top: 18px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.inspo-client-bar-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #94a3b8;
}
.inspo-client-bar-label i { width: 14px; height: 14px; color: #6366f1; }
.inspo-client-bar-value {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inspo-client-bar-value strong {
    color: #f1f5f9;
    font-size: 13px;
    font-weight: 600;
}
.inspo-client-change-v2 {
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.25);
    color: #a5b4fc;
    border-radius: 8px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.12s;
}
.inspo-client-change-v2 i { width: 12px; height: 12px; }
.inspo-client-change-v2:hover { background: rgba(99, 102, 241, 0.2); }

/* CTA Analizar */
.inspo-actions-v2 {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 16px;
}
.inspo-analyze-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.18s, filter 0.15s;
    box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.5);
    min-height: 46px;
}
.inspo-analyze-cta i { width: 16px; height: 16px; }
.inspo-analyze-cta:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 12px 32px -6px rgba(99, 102, 241, 0.65);
}
.inspo-analyze-cta:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}
.inspo-kbd {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 5px;
    padding: 2px 6px;
    font-size: 10px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: rgba(255, 255, 255, 0.7);
    margin-left: 4px;
}
.inspo-usage-v2 {
    font-size: 11.5px;
    color: #64748b;
}

/* Help collapsible */
.inspo-help-v2 {
    margin-top: 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}
.inspo-help-v2 > summary {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 13px;
    color: #cbd5e1;
    font-weight: 500;
    list-style: none;
    user-select: none;
}
.inspo-help-v2 > summary::-webkit-details-marker { display: none; }
.inspo-help-v2 > summary i:first-child { width: 16px; height: 16px; color: #a5b4fc; }
.inspo-help-v2 > summary > span { flex: 1; }
.inspo-help-chev { width: 16px; height: 16px; color: #64748b; transition: transform 0.18s; }
.inspo-help-v2[open] .inspo-help-chev { transform: rotate(180deg); }
.inspo-help-v2-body {
    padding: 0 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 14px;
}
.inspo-help-step {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.inspo-help-num {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.inspo-help-step strong {
    display: block;
    color: #f1f5f9;
    font-size: 13px;
    margin-bottom: 2px;
}
.inspo-help-step span {
    color: #94a3b8;
    font-size: 12.5px;
    line-height: 1.5;
}
.inspo-help-step code {
    background: rgba(0, 0, 0, 0.3);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11px;
    color: #fbbf24;
}

/* ─── PICKER GRID V2 ─── */
.inspo-results-header-v2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.inspo-back-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.12s;
    min-height: 38px;
}
.inspo-back-btn i { width: 14px; height: 14px; }
.inspo-back-btn:hover { background: rgba(255, 255, 255, 0.1); color: #f1f5f9; }
.inspo-results-meta {
    font-size: 13px;
    color: #94a3b8;
}
.inspo-results-meta strong { color: #f1f5f9; font-weight: 700; }
.inspo-results-query {
    margin-left: 8px;
    color: #64748b;
    font-style: italic;
    font-size: 12px;
}

.inspo-pick-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 14px;
}
.inspo-pick-card-v2 {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
    position: relative;
    overflow: hidden;
}
.inspo-pick-card-v2:hover,
.inspo-pick-card-v2:focus-visible {
    border-color: rgba(168, 85, 247, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.5);
    outline: none;
}
.inspo-pick-card-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.inspo-pick-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.inspo-pick-card-page {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inspo-pick-card-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #64748b;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.inspo-pick-card-date i { width: 11px; height: 11px; }
.inspo-pick-card-plats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.inspo-plat-badge-v2 {
    background: rgba(99, 102, 241, 0.12);
    color: #a5b4fc;
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 5px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 600;
    text-transform: lowercase;
}
.inspo-pick-card-headline {
    font-size: 14px;
    font-weight: 600;
    color: #e2e8f0;
    line-height: 1.35;
}
.inspo-pick-card-body {
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.55;
    flex: 1;
    min-height: 60px;
}
.inspo-pick-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.inspo-pick-card-snap {
    font-size: 11.5px;
    color: #94a3b8;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.inspo-pick-card-snap i { width: 12px; height: 12px; }
.inspo-pick-card-snap:hover { color: #a5b4fc; }
.inspo-pick-card-cta {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter 0.12s, transform 0.12s;
}
.inspo-pick-card-cta i { width: 13px; height: 13px; }
.inspo-pick-card-cta .inspo-pick-arrow {
    transition: transform 0.18s;
}
.inspo-pick-card-v2:hover .inspo-pick-arrow {
    transform: translateX(3px);
}
.inspo-pick-card-cta:hover { filter: brightness(1.1); }

/* ─── RESULTADO V2 ─── */
.inspo-result-v2 {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 1200px;       /* Evita estirarse al ancho completo del viewport */
    margin: 0 auto;
    width: 100%;
    min-width: 0;            /* Permite shrinking de hijos flex */
}

/* Top action bar */
.inspo-result-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.inspo-result-topbar-actions {
    display: flex;
    gap: 8px;
}
.inspo-result-btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border-radius: 9px;
    padding: 8px 13px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: background 0.12s;
    min-height: 36px;
}
.inspo-result-btn-ghost i { width: 13px; height: 13px; }
.inspo-result-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: #f1f5f9; }

/* Score Hero — el wow moment */
.inspo-score-hero {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 22px;
    align-items: start;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.04));
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 18px;
    padding: 20px 22px;
    position: relative;
    overflow: hidden;
}
.inspo-score-hero.is-good {
    border-color: rgba(34, 197, 94, 0.3);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(16, 185, 129, 0.04));
}
.inspo-score-hero.is-low {
    border-color: rgba(239, 68, 68, 0.3);
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.06), rgba(220, 38, 38, 0.03));
}

.inspo-score-circle {
    position: relative;
    width: 130px;
    height: 130px;
    flex-shrink: 0;
}
.inspo-score-svg { width: 100%; height: 100%; transform: rotate(0deg); }
.inspo-score-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 8;
}
.inspo-score-circle-fg {
    fill: none;
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.inspo-score-circle-fg.is-good { stroke: url(#scoreGoodGrad); stroke: #22c55e; }
.inspo-score-circle-fg.is-mid  { stroke: #fbbf24; }
.inspo-score-circle-fg.is-low  { stroke: #f87171; }

.inspo-score-center {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    line-height: 1;
}
.inspo-score-num-big {
    font-size: 42px;
    font-weight: 800;
    color: #f1f5f9;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.inspo-score-denom-big {
    font-size: 14px;
    color: #64748b;
    font-weight: 500;
    margin-top: 2px;
}

.inspo-score-hero-body {
    min-width: 0;
}
.inspo-score-tier {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 8px;
}
.inspo-score-tier.is-good { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.inspo-score-tier.is-mid  { background: rgba(251, 191, 36, 0.15); color: #fbbf24; }
.inspo-score-tier.is-low  { background: rgba(239, 68, 68, 0.15); color: #f87171; }

.inspo-score-page {
    font-size: 22px;
    font-weight: 700;
    color: #f1f5f9;
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.inspo-score-meta {
    font-size: 12px;
    color: #94a3b8;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 14px;
}
.inspo-score-meta i { width: 12px; height: 12px; }

/* Hook hero (magazine pull-quote) */
.inspo-hook-hero {
    margin-top: 14px;
    padding: 14px 16px;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.18);
    border-radius: 12px;
}
.inspo-hook-hero-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #94a3b8;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}
.inspo-hook-hero-label > span:not(.inspo-tag-v2) {
    color: #cbd5e1;
}
.inspo-hook-hero-label i { width: 13px; height: 13px; color: #fbbf24; }
.inspo-tag-v2 {
    background: rgba(168, 85, 247, 0.18);
    color: #c4b5fd;
    border-radius: 5px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}
.inspo-hook-hero-quote {
    margin: 0 0 8px 0;
    padding: 0;
    border-left: none;
    font-size: 16px;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.45;
    font-style: normal;
    position: relative;
    quotes: '«' '»';
    /* Clamp a 3 líneas para hooks largos — evita que el hero crezca enorme */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.inspo-hook-hero-quote::before {
    content: open-quote;
    color: #a855f7;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    margin-right: 2px;
    vertical-align: -3px;
}
.inspo-hook-hero-quote::after { content: close-quote; color: #a855f7; }
/* Hooks muy largos → font más pequeño aún */
.inspo-hook-hero-quote.is-long {
    font-size: 14.5px;
    line-height: 1.5;
    -webkit-line-clamp: 4;
}
.inspo-hook-hero-why {
    font-size: 12px;
    color: #94a3b8;
    line-height: 1.5;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}

/* Card V2 base */
.inspo-card-v2 {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 18px;
}
/* === Inspo: Guión hablado del video === */
.inspo-card-script { background: linear-gradient(180deg, rgba(168, 85, 247, 0.06), rgba(99, 102, 241, 0.03)); border: 1px solid rgba(168, 85, 247, 0.2); }
.inspo-script-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; }
.inspo-script-row { display: flex; flex-direction: column; gap: 6px; }
.inspo-script-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #c084fc; }
.inspo-script-row p { margin: 0; color: #e2e8f0; line-height: 1.55; font-size: 14px; }
.inspo-script-hook { font-size: 16px !important; font-weight: 600; color: #fff !important; padding: 12px 14px; background: rgba(168, 85, 247, 0.12); border-left: 3px solid #c084fc; border-radius: 6px; }
.inspo-script-quotes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.inspo-script-quotes li { padding: 8px 12px; background: rgba(255, 255, 255, 0.03); border-radius: 6px; color: #cbd5e1; font-style: italic; font-size: 13.5px; }

/* === Inspo: Guión completo (transcripción literal) === */
.inspo-script-full { background: rgba(0,0,0,0.18); border-radius: 8px; border: 1px solid rgba(168,85,247,0.18); padding: 10px 14px; }
.inspo-script-full summary { cursor: pointer; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #c084fc; display: inline-flex; align-items: center; gap: 6px; user-select: none; }
.inspo-script-full summary i { width: 14px; height: 14px; }
.inspo-script-full[open] summary { margin-bottom: 10px; }
.inspo-script-full-text { color: #e2e8f0; line-height: 1.65; font-size: 14px; white-space: normal; }

/* === Inspo: Desglose por sección de la fórmula === */
.inspo-script-breakdown { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: seg; }
.inspo-script-segment { padding: 12px 14px; background: rgba(168,85,247,0.06); border-left: 3px solid #c084fc; border-radius: 8px; }
.inspo-script-segment-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.inspo-script-segment-num { background: #c084fc; color: #1e1b4b; font-weight: 800; font-size: 11px; padding: 2px 7px; border-radius: 4px; min-width: 22px; text-align: center; }
.inspo-script-segment-name { color: #fff; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.4px; }
.inspo-script-segment-quote { margin: 0 0 6px; color: #e2e8f0; font-style: italic; font-size: 13.5px; line-height: 1.55; }
.inspo-script-segment-fn { margin: 0; display: flex; gap: 6px; align-items: flex-start; color: #94a3b8; font-size: 12.5px; line-height: 1.5; }
.inspo-script-segment-fn i { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 2px; color: #c084fc; }

/* === Inspo: Framework reutilizable (guardar) === */
.inspo-card-fwsave { background: linear-gradient(180deg, rgba(34,197,94,0.06), rgba(99,102,241,0.03)); border: 1px solid rgba(34,197,94,0.22); }
.inspo-fwsave-body { display: flex; flex-direction: column; gap: 14px; padding: 4px 2px; }
.inspo-fwsave-name { color: #fff; font-weight: 700; font-size: 17px; }
.inspo-fwsave-desc { margin: 6px 0 0; color: #cbd5e1; font-size: 14px; line-height: 1.55; }
.inspo-fwsave-secs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.inspo-fwsave-secs li { padding: 8px 12px; background: rgba(255,255,255,0.03); border-radius: 6px; color: #cbd5e1; font-size: 13.5px; line-height: 1.5; }
.inspo-fwsave-secs li strong { color: #86efac; margin-right: 4px; }
.inspo-fwsave-when { margin: 10px 0 0; display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; background: rgba(34,197,94,0.08); border-radius: 6px; color: #86efac; font-size: 13px; }
.inspo-fwsave-when i { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; }
.inspo-fwsave-btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; border: none; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; }
.inspo-fwsave-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(34,197,94,0.25); }
.inspo-fwsave-btn i { width: 16px; height: 16px; }

/* === Inspo: Modal genérico (guardar framework) === */
.inspo-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 20px; }
.inspo-modal { background: #0f172a; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.inspo-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.inspo-modal-head h3 { margin: 0; color: #fff; font-size: 17px; display: flex; align-items: center; gap: 8px; }
.inspo-modal-head h3 i { width: 20px; height: 20px; color: #22c55e; }
.inspo-modal-close { background: transparent; border: none; color: #94a3b8; cursor: pointer; padding: 6px; border-radius: 6px; }
.inspo-modal-close:hover { background: rgba(255,255,255,0.06); color: #fff; }
.inspo-modal-body { padding: 18px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.inspo-modal-field { display: flex; flex-direction: column; gap: 5px; }
.inspo-modal-field span { color: #cbd5e1; font-size: 12.5px; font-weight: 600; }
.inspo-modal-field input, .inspo-modal-field textarea { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 7px; color: #fff; padding: 9px 12px; font-size: 14px; font-family: inherit; resize: vertical; }
.inspo-modal-field input:focus, .inspo-modal-field textarea:focus { outline: none; border-color: #22c55e; }
.inspo-modal-hint { color: #64748b; font-size: 11.5px; }
.inspo-modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px; border-top: 1px solid rgba(255,255,255,0.06); }
.inspo-modal-btn-ghost { background: transparent; color: #cbd5e1; border: 1px solid rgba(255,255,255,0.12); padding: 9px 16px; border-radius: 7px; cursor: pointer; font-weight: 500; }
.inspo-modal-btn-ghost:hover { background: rgba(255,255,255,0.04); }
.inspo-modal-btn-primary { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; border: none; padding: 9px 18px; border-radius: 7px; cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.inspo-modal-btn-primary:hover { box-shadow: 0 4px 14px rgba(34,197,94,0.3); }
.inspo-modal-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* === Inspo: Análisis visual del creativo === */
.inspo-card-visual { background: linear-gradient(180deg, rgba(34, 211, 238, 0.05), rgba(99, 102, 241, 0.02)); border: 1px solid rgba(34, 211, 238, 0.18); }
.inspo-visual-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 4px 2px; }
.inspo-visual-item { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: rgba(255, 255, 255, 0.03); border-radius: 8px; }
.inspo-visual-item.inspo-visual-full { grid-column: 1 / -1; }
.inspo-visual-item strong { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #67e8f9; }
.inspo-visual-item span { color: #e2e8f0; font-size: 13.5px; line-height: 1.5; }
.inspo-visual-tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.inspo-visual-tags li { padding: 4px 10px; background: rgba(34, 211, 238, 0.12); color: #a5f3fc; border-radius: 12px; font-size: 12px; font-weight: 500; }
@media (max-width: 720px) { .inspo-visual-grid { grid-template-columns: 1fr; } }

.inspo-card-v2-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.inspo-card-v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    font-weight: 600;
}
.inspo-card-v2-eyebrow i { width: 13px; height: 13px; color: #a5b4fc; }
.inspo-card-v2-eyebrow.is-good i { color: #22c55e; }
.inspo-card-v2-eyebrow.is-bad i { color: #f87171; }

.inspo-result-grid-v2 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);  /* permite shrinking */
    gap: 14px;
    min-width: 0;
}
.inspo-card-v2 { min-width: 0; }                /* permite shrinking dentro del grid */

/* Anuncio original */
.inspo-card-ad-v2 .inspo-ad-headline {
    margin: 0 0 10px 0;
    font-size: 16px;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.35;
}
.inspo-ad-body-v2 {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 14px;
    color: #cbd5e1;
    font-size: 13.5px;
    line-height: 1.6;
    margin-bottom: 10px;
    max-height: 280px;
    overflow-y: auto;
}
.inspo-ad-desc-v2 {
    font-size: 12px;
    color: #94a3b8;
    font-style: italic;
    margin-bottom: 12px;
}
.inspo-ad-snapshot-v2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #a5b4fc;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    padding: 8px 12px;
    background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.25);
    border-radius: 8px;
    transition: background 0.12s;
}
.inspo-ad-snapshot-v2 i { width: 13px; height: 13px; }
.inspo-ad-snapshot-v2:hover { background: rgba(99, 102, 241, 0.2); }

/* Scores V2 */
.inspo-scores-v2 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}
.inspo-score-row-v2 {
    display: grid;
    grid-template-columns: 130px 1fr 60px;
    align-items: center;
    gap: 12px;
}
.inspo-score-label-v2 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #cbd5e1;
    font-weight: 500;
}
.inspo-score-label-v2 i { width: 12px; height: 12px; color: #94a3b8; }
.inspo-score-bar-v2 {
    height: 7px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 999px;
    overflow: hidden;
}
.inspo-score-fill-v2 {
    height: 100%;
    border-radius: 999px;
    transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.inspo-score-fill-v2.is-good { background: linear-gradient(90deg, #22c55e, #4ade80); }
.inspo-score-fill-v2.is-mid  { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.inspo-score-fill-v2.is-low  { background: linear-gradient(90deg, #f87171, #ef4444); }
.inspo-score-fill-v2.is-bad  { background: linear-gradient(90deg, #ef4444, #b91c1c); }
.inspo-score-num-v2 {
    text-align: right;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}
.inspo-score-num-v2.is-good { color: #4ade80; }
.inspo-score-num-v2.is-mid  { color: #fbbf24; }
.inspo-score-num-v2.is-low  { color: #f87171; }
.inspo-score-num-v2.is-bad  { color: #ef4444; }
.inspo-score-denom {
    font-size: 10px;
    color: #64748b;
    font-weight: 500;
}

/* Pills row (framework + buyer) */
.inspo-pills-row-v2 {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.inspo-pill-v2 {
    flex: 1 1 200px;
    min-width: 0;
    max-width: 100%;
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 10px;
    padding: 10px 14px;
}
.inspo-pill-v2 > i { margin-top: 3px; }
.inspo-pill-v2 > i {
    width: 18px;
    height: 18px;
    color: #a5b4fc;
    flex-shrink: 0;
}
.inspo-pill-v2 > div { display: flex; flex-direction: column; min-width: 0; }
.inspo-pill-v2 span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    font-weight: 600;
}
.inspo-pill-v2 strong {
    font-size: 13px;
    color: #f1f5f9;
    font-weight: 600;
    line-height: 1.4;
    word-break: break-word;
}

/* Buyer grid (dolor + deseo) */
.inspo-buyer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}
.inspo-buyer-card {
    display: flex;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid;
    min-width: 0;
    overflow: hidden;
}
.inspo-buyer-card > i { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.inspo-buyer-card > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}
.inspo-buyer-card span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}
.inspo-buyer-card strong {
    font-size: 12.5px;
    color: #e2e8f0;
    font-weight: 500;
    line-height: 1.5;
    word-break: break-word;
    overflow-wrap: break-word;
}
.inspo-buyer-card.is-pain {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.2);
}
.inspo-buyer-card.is-pain > i { color: #f87171; }
.inspo-buyer-card.is-pain span { color: #f87171; }
.inspo-buyer-card.is-desire {
    background: rgba(34, 197, 94, 0.06);
    border-color: rgba(34, 197, 94, 0.2);
}
.inspo-buyer-card.is-desire > i { color: #22c55e; }
.inspo-buyer-card.is-desire span { color: #4ade80; }

/* Estructura grid */
.inspo-structure-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}
.inspo-structure-item {
    display: flex;
    gap: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 12px;
    align-items: flex-start;
}
.inspo-structure-step {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.inspo-structure-item > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.inspo-structure-item strong {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    font-weight: 600;
}
.inspo-structure-item span {
    font-size: 12.5px;
    color: #e2e8f0;
    line-height: 1.45;
}

/* Pros/cons */
.inspo-pros-cons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
.inspo-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.inspo-checklist li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 12.5px;
    color: #cbd5e1;
    line-height: 1.5;
}
.inspo-checklist li > i {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    margin-top: 2px;
}
.inspo-checklist.is-good li > i { color: #22c55e; }
.inspo-checklist.is-bad li > i { color: #f87171; }

/* Ideas section V2 */
.inspo-ideas-section-v2 {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.06), rgba(99, 102, 241, 0.04));
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 18px;
    padding: 22px;
}
.inspo-ideas-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.inspo-ideas-title-v2 {
    margin: 4px 0 0 0;
    font-size: 22px;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}
.inspo-ideas-count {
    background: rgba(168, 85, 247, 0.15);
    color: #c4b5fd;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inspo-ideas-grid-v2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 14px;
}
.inspo-idea-card-v2 {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: border-color 0.18s, transform 0.18s;
}
.inspo-idea-card-v2:hover {
    border-color: rgba(168, 85, 247, 0.3);
    transform: translateY(-2px);
}
.inspo-idea-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
}
.inspo-idea-num-v2 {
    font-size: 11px;
    font-weight: 800;
    color: #a855f7;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.5px;
    background: rgba(168, 85, 247, 0.12);
    border-radius: 6px;
    padding: 3px 8px;
}
.inspo-idea-angulo-v2 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inspo-idea-hook-quote {
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    color: #f1f5f9;
    line-height: 1.4;
    position: relative;
    padding-left: 4px;
}
.inspo-idea-quote-mark {
    color: #a855f7;
    font-size: 28px;
    line-height: 1;
    margin-right: 4px;
    vertical-align: -6px;
    font-weight: 800;
}
.inspo-idea-script {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.55;
    border-left: 2px solid rgba(168, 85, 247, 0.4);
}
.inspo-idea-why-v2 {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.5;
    padding-top: 4px;
    border-top: 1px dashed rgba(255, 255, 255, 0.06);
}
.inspo-idea-why-v2 i {
    width: 13px;
    height: 13px;
    color: #fbbf24;
    flex-shrink: 0;
    margin-top: 1px;
}
.inspo-idea-actions-v2 {
    display: flex;
    gap: 6px;
    margin-top: auto;
    padding-top: 4px;
}
.inspo-idea-btn-ghost,
.inspo-idea-btn-primary {
    flex: 1;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: filter 0.12s, background 0.12s;
}
.inspo-idea-btn-ghost {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.inspo-idea-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}
.inspo-idea-btn-primary {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    flex: 1.5;
}
.inspo-idea-btn-primary:hover { filter: brightness(1.08); }
.inspo-idea-btn-ghost i,
.inspo-idea-btn-primary i { width: 13px; height: 13px; }

/* Responsive */
@media (max-width: 900px) {
    .inspo-hero-title-v2 { font-size: 24px; }
    .inspo-result-grid-v2 { grid-template-columns: 1fr; }
    .inspo-pros-cons-grid { grid-template-columns: 1fr; }
    .inspo-buyer-grid { grid-template-columns: 1fr; }
    .inspo-score-hero { grid-template-columns: 1fr; text-align: center; }
    .inspo-score-circle { margin: 0 auto; }
    .inspo-score-row-v2 { grid-template-columns: 110px 1fr 50px; }
}
@media (max-width: 600px) {
    .inspo-hero-v2 { padding: 22px 18px; }
    .inspo-hero-title-v2 { font-size: 22px; }
    .inspo-input-card-v2 { padding: 16px; }
    .inspo-input-shell { padding: 4px 4px 4px 12px; }
    .inspo-input-mode-badge { display: none !important; }
    .inspo-pick-grid-v2 { grid-template-columns: 1fr; }
    .inspo-score-hero { padding: 18px; }
    .inspo-score-circle { width: 100px; height: 100px; }
    .inspo-score-num-big { font-size: 32px; }
    .inspo-hook-hero-quote { font-size: 16px; }
    .inspo-score-row-v2 { grid-template-columns: 90px 1fr 46px; gap: 8px; font-size: 11px; }
    .inspo-score-label-v2 { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .inspo-score-circle-fg, .inspo-score-fill-v2 { transition: none; }
    .inspo-pick-card-v2:hover, .inspo-idea-card-v2:hover { transform: none; }
}

/* ============================================================
   INSPO RECOVER CARD — fallback cuando scraping falla
   ============================================================ */
.inspo-recover-card {
    max-width: 540px;
    margin: 24px auto;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(168, 85, 247, 0.04));
    border: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 18px;
    padding: 32px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.inspo-recover-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 28px -8px rgba(168, 85, 247, 0.5);
    margin-bottom: 4px;
}
.inspo-recover-icon i { width: 28px; height: 28px; }
.inspo-recover-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}
.inspo-recover-sub {
    margin: 0;
    color: #cbd5e1;
    font-size: 14px;
    line-height: 1.55;
    max-width: 440px;
}
.inspo-recover-form {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 440px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 4px 4px 4px 14px;
    gap: 6px;
    margin-top: 8px;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.inspo-recover-form:focus-within {
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.12);
}
.inspo-recover-input-icon { width: 16px; height: 16px; color: #94a3b8; flex-shrink: 0; }
.inspo-recover-input {
    flex: 1;
    background: transparent;
    border: none;
    color: #f1f5f9;
    font-size: 14px;
    padding: 11px 8px;
    outline: none;
    min-width: 0;
}
.inspo-recover-input::placeholder { color: #64748b; }
.inspo-recover-btn {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter 0.12s;
    flex-shrink: 0;
}
.inspo-recover-btn i { width: 13px; height: 13px; }
.inspo-recover-btn:hover:not(:disabled) { filter: brightness(1.08); }
.inspo-recover-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.inspo-recover-back {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 12px;
    cursor: pointer;
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.12s;
}
.inspo-recover-back i { width: 12px; height: 12px; }
.inspo-recover-back:hover { background: rgba(255, 255, 255, 0.05); color: #cbd5e1; }

/* ============================================================
   INSPO V2 — CREATIVE PREVIEWS (iframe del ad real)
   ============================================================ */

/* Picker card: layout reorganizado para que preview vaya arriba */
.inspo-pick-card-v2 {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.inspo-pick-card-info {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

/* Iframe wrapper con aspect-ratio y overlay para evitar clic en iframe */
.inspo-pick-creative {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: linear-gradient(135deg, #1e1b2e, #161423);
    overflow: hidden;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
/* Media real (img o video) servido vía proxy backend */
.inspo-pick-creative-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #0d0a17;
    display: block;
}
/* Overlay decorativo (gradient bottom) */
.inspo-pick-creative-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(180deg, transparent 55%, rgba(20, 18, 32, 0.55) 100%);
    transition: background 0.2s;
    pointer-events: none;
}
.inspo-pick-card-v2:hover .inspo-pick-creative-overlay {
    background: linear-gradient(180deg, transparent 40%, rgba(99, 102, 241, 0.3) 100%);
}

/* Badge de tipo (video / carousel) */
.inspo-pick-creative-type-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    z-index: 3;
}
.inspo-pick-creative-type-badge i { width: 12px; height: 12px; }

/* Skeleton + shimmer mientras carga */
.inspo-pick-creative-skeleton {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #1e1b2e, #161423);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.inspo-pick-creative-skeleton-icon {
    width: 28px;
    height: 28px;
    color: rgba(168, 85, 247, 0.35);
    z-index: 1;
}
.inspo-pick-creative-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(168, 85, 247, 0.08) 50%,
        transparent 100%
    );
    animation: inspoShimmer 1.6s linear infinite;
    will-change: transform;
}
@keyframes inspoShimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Empty state cuando no hay snapshot/media */
.inspo-pick-creative-empty,
.inspo-pick-creative-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748b;
    font-size: 12px;
    background: rgba(0, 0, 0, 0.3);
    position: absolute;
    inset: 0;
}
.inspo-pick-creative-empty i,
.inspo-pick-creative-empty-state i {
    width: 28px;
    height: 28px;
    color: #475569;
}

/* Result page: media del creativo más grande */
.inspo-result-creative {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 480px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #1e1b2e, #161423);
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.inspo-result-creative .inspo-pick-creative-media,
.inspo-result-creative video,
.inspo-result-creative img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0d0a17;
}

.inspo-result-media-direct {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 480px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, #1e1b2e, #161423);
    margin-bottom: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.inspo-result-media-direct .inspo-pick-creative-media,
.inspo-result-media-direct video,
.inspo-result-media-direct img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #0d0a17;
}

@media (prefers-reduced-motion: reduce) {
    .inspo-pick-creative-shimmer { animation: none; }
}

/* ============================================================
   INSPO V2 — UI POLISH (creative fallback, score ticks, framework empty)
   ============================================================ */

/* ── Empty state premium para preview no disponible ── */
.inspo-creative-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    overflow: hidden;
    background:
        linear-gradient(135deg,
            hsl(var(--brand-hue, 260) 35% 14%) 0%,
            hsl(var(--brand-hue, 260) 25% 10%) 100%);
}
.inspo-creative-fallback-bg {
    position: absolute;
    inset: -50%;
    background:
        radial-gradient(circle at 30% 30%,
            hsl(var(--brand-hue, 260) 60% 40% / 0.3) 0%,
            transparent 50%),
        radial-gradient(circle at 70% 70%,
            hsl(calc(var(--brand-hue, 260) + 60) 70% 50% / 0.2) 0%,
            transparent 50%);
    filter: blur(40px);
    opacity: 0.8;
    pointer-events: none;
}
.inspo-creative-fallback-avatar {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: hsl(var(--brand-hue, 260) 80% 88%);
    background: linear-gradient(135deg,
        hsl(var(--brand-hue, 260) 50% 25%),
        hsl(calc(var(--brand-hue, 260) + 30) 60% 30%));
    box-shadow:
        0 12px 32px -8px hsl(var(--brand-hue, 260) 60% 20% / 0.6),
        inset 0 1px 0 hsl(var(--brand-hue, 260) 80% 70% / 0.2);
    position: relative;
    z-index: 1;
}
.inspo-creative-fallback-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
    z-index: 1;
}
.inspo-creative-fallback-meta i { width: 12px; height: 12px; }

/* En la página de análisis (más grande) */
.inspo-result-creative .inspo-creative-fallback-avatar {
    width: 96px;
    height: 96px;
    font-size: 36px;
    border-radius: 26px;
}

/* ── Score bars V2 — ticks 1-10 + semantic colors ── */
.inspo-score-row-v2 {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 56px;   /* minmax permite shrinking */
    align-items: center;
    gap: 14px;
    padding: 4px 0;
    min-width: 0;
}
/* Sección de scores con max-width razonable para que no se estire al ancho viewport */
.inspo-scores-v2 {
    max-width: 640px;
    width: 100%;
}
.inspo-score-bar-v2 {
    position: relative;
    height: 10px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    overflow: hidden;
}
.inspo-score-ticks {
    position: absolute;
    inset: 0;
    display: flex;
    pointer-events: none;
    z-index: 2;
}
.inspo-score-tick {
    flex: 1;
    border-right: 1px solid rgba(0, 0, 0, 0.4);
}
.inspo-score-tick:last-child { border-right: none; }
.inspo-score-fill-v2 {
    height: 100%;
    border-radius: 999px;
    position: relative;
    z-index: 1;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.inspo-score-fill-v2.is-good { background: linear-gradient(90deg, #16a34a, #22c55e, #4ade80); }
.inspo-score-fill-v2.is-mid  { background: linear-gradient(90deg, #d97706, #f59e0b, #fbbf24); }
.inspo-score-fill-v2.is-low  { background: linear-gradient(90deg, #dc2626, #ef4444, #f87171); }
.inspo-score-fill-v2.is-bad  { background: linear-gradient(90deg, #991b1b, #b91c1c, #dc2626); }
.inspo-score-fill-v2.is-unset { background: rgba(255, 255, 255, 0.06); }

.inspo-score-row-v2.is-unset .inspo-score-label-v2 { opacity: 0.5; }
.inspo-score-row-v2.is-unset .inspo-score-num-v2 { color: #475569; }

.inspo-score-num-v2 {
    text-align: right;
    font-weight: 800;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.inspo-score-num-v2.is-good { color: #4ade80; }
.inspo-score-num-v2.is-mid  { color: #fbbf24; }
.inspo-score-num-v2.is-low  { color: #f87171; }
.inspo-score-num-v2.is-bad  { color: #ef4444; }
.inspo-score-denom {
    font-size: 10px;
    color: #64748b;
    font-weight: 500;
    margin-left: 2px;
}

/* ── Framework empty (cuando "ninguno claro") ── */
.inspo-pill-v2.is-empty {
    background: rgba(255, 255, 255, 0.025);
    border-color: rgba(255, 255, 255, 0.06);
    border-style: dashed;
}
.inspo-pill-v2.is-empty > i {
    color: #475569;
}
.inspo-pill-v2.is-empty strong.t-muted {
    color: #64748b !important;
    font-weight: 500;
    font-style: italic;
}

/* ── Hero: balance brand + score ── */
.inspo-score-page {
    background: linear-gradient(120deg, #f1f5f9, #c7d2fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Anuncio original card: cuando solo tiene texto, hace balance visual ── */
.inspo-card-ad-v2 {
    display: flex;
    flex-direction: column;
}
.inspo-card-ad-v2 .inspo-card-v2-head {
    margin-bottom: 12px;
}
.inspo-card-ad-v2 .inspo-result-creative {
    margin-bottom: 16px;
}
.inspo-ad-headline {
    font-size: 17px;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.3;
    letter-spacing: -0.01em;
    margin: 0 0 12px 0;
}
.inspo-ad-body-v2 {
    font-size: 14px;
    line-height: 1.65;
}

/* ── Score detallado section: spacing más generoso ── */
.inspo-card-analysis-v2 .inspo-scores-v2 {
    gap: 8px;
}

@media (max-width: 600px) {
    .inspo-creative-fallback-avatar { width: 60px; height: 60px; font-size: 24px; }
    .inspo-result-creative .inspo-creative-fallback-avatar { width: 76px; height: 76px; font-size: 30px; }
    .inspo-score-row-v2 { grid-template-columns: 100px 1fr 48px; gap: 10px; }
    .inspo-score-bar-v2 { height: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    .inspo-score-fill-v2 { transition: none; }
}

/* ============================================================
   INSPO V2 — FALLBACK COMPACTO (cuando proxy no extrae media)
   ============================================================ */

/* Cuando no hay creativo, colapsa la sección visual a una tira fina.
   El copy del ad pasa a ser el protagonista del card. */
.inspo-pick-creative.is-compact {
    aspect-ratio: auto;
    height: auto;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.inspo-creative-fallback-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background:
        linear-gradient(90deg,
            hsl(var(--brand-hue, 260) 30% 18% / 0.5) 0%,
            hsl(var(--brand-hue, 260) 25% 12% / 0.3) 100%);
    border-bottom: 1px solid hsl(var(--brand-hue, 260) 40% 30% / 0.25);
}

.inspo-creative-fallback-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: hsl(var(--brand-hue, 260) 75% 85%);
    background: linear-gradient(135deg,
        hsl(var(--brand-hue, 260) 50% 28%),
        hsl(calc(var(--brand-hue, 260) + 30) 60% 32%));
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 hsl(var(--brand-hue, 260) 80% 60% / 0.25);
}

.inspo-creative-fallback-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.inspo-creative-fallback-title {
    font-size: 12.5px;
    font-weight: 600;
    color: #e2e8f0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inspo-creative-fallback-sub {
    font-size: 10px;
    color: #64748b;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.inspo-creative-fallback-sub i { width: 10px; height: 10px; }

/* En la página de análisis (resultado), MANTÉN el fallback grande
   porque ahí sí queremos jerarquía visual de "anuncio original" */
.inspo-result-creative.inspo-pick-creative-empty-state {
    /* mantiene aspect-ratio original */
}
.inspo-result-creative.inspo-pick-creative-empty-state .inspo-creative-fallback-compact {
    display: none;
}
.inspo-result-creative.inspo-pick-creative-empty-state::after {
    content: '';
    /* fallback grande se dibuja con :after si quieres, o mantén la versión grande */
}

/* Aseguramos que el card content sea visible cuando creative está colapsado */
.inspo-pick-card-v2:has(.inspo-pick-creative.is-compact) .inspo-pick-card-info {
    padding-top: 12px;
}

/* Card body: cuando no hay creativo, hacer el body más prominente */
.inspo-pick-card-v2:has(.inspo-pick-creative.is-compact) .inspo-pick-card-body {
    -webkit-line-clamp: 6;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 100px;
    font-size: 13px;
    line-height: 1.6;
    color: #cbd5e1;
}
.inspo-pick-card-v2:has(.inspo-pick-creative.is-compact) .inspo-pick-card-headline {
    font-size: 15px;
    line-height: 1.35;
}

/* ============================================================
   INSPO GENERATE — CTA + Modal Selector + Result Card
   ============================================================ */

/* ── CTA grande para iniciar la generación ── */
.inspo-generate-cta {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    background:
        linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(168, 85, 247, 0.08) 50%, rgba(236, 72, 153, 0.05) 100%);
    border: 1px solid rgba(168, 85, 247, 0.28);
    border-radius: 18px;
    position: relative;
    overflow: hidden;
}
.inspo-generate-cta::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 20% 30%, rgba(168, 85, 247, 0.18) 0%, transparent 50%);
    pointer-events: none;
    filter: blur(40px);
}
.inspo-generate-cta-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 12px 28px -8px rgba(168, 85, 247, 0.5);
    z-index: 1;
}
.inspo-generate-cta-icon i { width: 28px; height: 28px; }
.inspo-generate-cta-body { z-index: 1; min-width: 0; }
.inspo-generate-cta-title {
    margin: 0 0 6px 0;
    font-size: 18px;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}
.inspo-generate-cta-sub {
    margin: 0;
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.5;
    max-width: 600px;
}
.inspo-generate-cta-sub strong { color: #c4b5fd; font-weight: 600; }
.inspo-generate-cta-btn {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: transform 0.15s, filter 0.15s, box-shadow 0.18s;
    box-shadow: 0 8px 24px -6px rgba(99, 102, 241, 0.5);
    flex-shrink: 0;
    z-index: 1;
    white-space: nowrap;
}
.inspo-generate-cta-btn i { width: 16px; height: 16px; }
.inspo-generate-cta-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 12px 32px -6px rgba(99, 102, 241, 0.65);
}

/* ── Image prompt result (inspo → imagen) ── */
.inspo-imgprompt-card {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(6, 182, 212, 0.2);
    border-radius: 16px;
    overflow: hidden;
}
.inspo-imgprompt-main { padding: 18px 22px; }
.inspo-imgprompt-prompt {
    font-size: 14px;
    line-height: 1.6;
    color: #e2e8f0;
    background: rgba(0,0,0,0.25);
    border-radius: 10px;
    padding: 14px 16px;
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 14px;
}
.inspo-imgprompt-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.inspo-imgprompt-action-btn {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #cbd5e1;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}
.inspo-imgprompt-action-btn:hover { background: rgba(255,255,255,0.1); }
.inspo-imgprompt-action-btn i { width: 14px; height: 14px; }
.inspo-imgprompt-action-btn.is-primary {
    background: linear-gradient(135deg, #06b6d4, #8b5cf6);
    border-color: transparent;
    color: #fff;
}
.inspo-imgprompt-action-btn.is-primary:hover { filter: brightness(1.1); }
.inspo-imgprompt-details {
    padding: 16px 22px;
    border-top: 1px solid rgba(255,255,255,0.06);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.inspo-imgprompt-detail {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.inspo-imgprompt-detail strong {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 5px;
}
.inspo-imgprompt-detail strong i { width: 13px; height: 13px; }
.inspo-imgprompt-detail span {
    font-size: 13px;
    color: #cbd5e1;
    line-height: 1.45;
}
.inspo-imgprompt-tip {
    grid-column: 1 / -1;
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.15);
    border-radius: 8px;
    padding: 10px 12px;
}
.inspo-imgprompt-tip strong { color: #fbbf24; }
@media (max-width: 600px) {
    .inspo-imgprompt-details { grid-template-columns: 1fr; }
}

/* ── Image prompt reference textarea ── */
#imageAdvancedPrompt {
    min-height: 80px;
    resize: vertical;
}

/* ── Modal selector de marca/producto ── */
.inspo-gen-modal { max-width: 560px; overflow: visible; }
.inspo-gen-body {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}
.inspo-gen-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.inspo-gen-field > span {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    font-weight: 700;
}
.inspo-gen-select {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    padding: 10px 12px;
    color: #f1f5f9;
    font-size: 14px;
    min-height: 42px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.inspo-gen-select:focus {
    outline: none;
    border-color: rgba(168, 85, 247, 0.5);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}
.inspo-gen-select:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.inspo-gen-formato-desc {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.4;
}

/* Preview del producto seleccionado */
.inspo-gen-preview-card {
    background: rgba(99, 102, 241, 0.06);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 11px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.inspo-gen-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}
.inspo-gen-preview-row strong {
    font-size: 14px;
    color: #f1f5f9;
    font-weight: 700;
}
.inspo-gen-preview-price {
    font-size: 12px;
    color: #4ade80;
    font-weight: 600;
    background: rgba(34, 197, 94, 0.12);
    padding: 2px 8px;
    border-radius: 6px;
}
.inspo-gen-preview-desc {
    font-size: 12px;
    color: #cbd5e1;
    line-height: 1.5;
}
.inspo-gen-preview-meta {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.5;
}
.inspo-gen-preview-meta i {
    width: 13px;
    height: 13px;
    color: #a5b4fc;
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Resultado del anuncio generado ── */
.inspo-generated-result {
    margin-top: 14px;
    animation: inspoFadeIn 0.4s ease-out;
}
@keyframes inspoFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.inspo-gen-result-card {
    background:
        linear-gradient(180deg, rgba(168, 85, 247, 0.08) 0%, rgba(99, 102, 241, 0.04) 100%);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 18px;
    padding: 22px 24px;
    overflow: hidden;
}
.inspo-gen-result-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(168, 85, 247, 0.25);
}
.inspo-gen-result-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #c4b5fd;
    font-weight: 700;
}
.inspo-gen-result-eyebrow i { width: 14px; height: 14px; }
.inspo-gen-result-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}
.inspo-gen-tag-product, .inspo-gen-tag {
    background: rgba(168, 85, 247, 0.15);
    color: #c4b5fd;
    border-radius: 6px;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 600;
}
.inspo-gen-tag-product {
    background: rgba(99, 102, 241, 0.18);
    color: #a5b4fc;
}

.inspo-gen-result-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
/* --- Sectioned builder blocks --- */
.inspo-gen-section {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 11px;
    padding: 14px 16px;
    transition: border-color 0.2s, background 0.2s;
}
.inspo-gen-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    gap: 8px;
}
.inspo-gen-section-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    font-weight: 700;
}
.inspo-gen-section-num {
    width: 22px; height: 22px; border-radius: 6px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff; font-weight: 800; font-size: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.inspo-gen-section-label i { width: 13px; height: 13px; color: #a78bfa; }
.inspo-gen-section-hint {
    font-size: 10.5px;
    color: #64748b;
    font-style: italic;
    max-width: 55%;
    text-align: right;
    line-height: 1.35;
}
.inspo-gen-section-text {
    font-size: 14px;
    color: #e2e8f0;
    line-height: 1.65;
}
.inspo-gen-section:first-child .inspo-gen-section-text {
    font-size: 16px;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.45;
}
.inspo-gen-section:last-child .inspo-gen-section-text {
    font-size: 15px;
    font-weight: 600;
    color: #4ade80;
}
/* Edit mode */
.inspo-gen-section-edit {
    width: 100%;
    min-height: 60px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 8px;
    color: #e2e8f0;
    font-size: 14px;
    line-height: 1.6;
    padding: 10px 12px;
    font-family: inherit;
    resize: vertical;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.inspo-gen-section-edit:focus {
    border-color: #a855f7;
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}
.inspo-gen-result-card.is-editing .inspo-gen-section {
    border-color: rgba(168, 85, 247, 0.2);
    background: rgba(0, 0, 0, 0.3);
}
/* Legacy compat */
.inspo-gen-block { display: none; }

/* "Por qué funciona" */
.inspo-gen-result-why {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(251, 191, 36, 0.06);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 10px;
}
.inspo-gen-result-why > i {
    width: 16px;
    height: 16px;
    color: #fbbf24;
    flex-shrink: 0;
    margin-top: 2px;
}
.inspo-gen-result-why > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.inspo-gen-result-why strong {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #fbbf24;
    font-weight: 700;
}
.inspo-gen-result-why span {
    font-size: 12.5px;
    color: #cbd5e1;
    line-height: 1.5;
}

/* Acciones del resultado */
.inspo-gen-result-actions {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}
.inspo-gen-action-btn,
.inspo-gen-action-primary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    border-radius: 9px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, filter 0.12s;
}
.inspo-gen-action-btn i, .inspo-gen-action-primary i { width: 13px; height: 13px; }
.inspo-gen-action-btn {
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.08);
}
.inspo-gen-action-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f1f5f9;
}
.inspo-gen-action-primary {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    margin-left: auto;
    box-shadow: 0 6px 16px -6px rgba(99, 102, 241, 0.5);
}
.inspo-gen-action-primary:hover { filter: brightness(1.08); }

/* Responsive */
@media (max-width: 760px) {
    .inspo-generate-cta { grid-template-columns: 1fr; text-align: center; }
    .inspo-generate-cta-icon { margin: 0 auto; }
    .inspo-generate-cta-btn { width: 100%; justify-content: center; }
    .inspo-gen-result-actions { flex-direction: column-reverse; }
    .inspo-gen-action-primary { margin-left: 0; width: 100%; justify-content: center; }
    .inspo-gen-action-btn { width: 100%; justify-content: center; }
}

/* ============================================================
   INSPO V2 — Recommended Framework + Optimized Version + Replicate
   ============================================================ */

/* ── Framework recomendado (highlight cyan) ── */
.inspo-recommended-framework {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.08), rgba(34, 211, 238, 0.04));
    border: 1px solid rgba(6, 182, 212, 0.25);
    border-radius: 14px;
    padding: 18px 22px;
}
.inspo-recommended-framework .inspo-card-v2-eyebrow i { color: #22d3ee; }
.inspo-rec-fw-name {
    font-size: 22px;
    font-weight: 800;
    color: #67e8f9;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
}
.inspo-rec-fw-why {
    margin: 0;
    font-size: 13.5px;
    color: #cbd5e1;
    line-height: 1.55;
    max-width: 720px;
}

/* ── Versión optimizada (la estrella del análisis) ── */
.inspo-optimized {
    background:
        linear-gradient(180deg, rgba(34, 197, 94, 0.06) 0%, rgba(22, 163, 74, 0.03) 100%);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 18px;
    padding: 22px 24px;
    position: relative;
    overflow: hidden;
}
.inspo-optimized::before {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 320px;
    height: 100%;
    background: radial-gradient(circle at 80% 20%, rgba(34, 197, 94, 0.12) 0%, transparent 60%);
    pointer-events: none;
    filter: blur(40px);
}
.inspo-optimized-header {
    margin-bottom: 16px;
    position: relative;
    z-index: 1;
}
.inspo-optimized-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #4ade80;
    font-weight: 700;
    margin-bottom: 4px;
}
.inspo-optimized-eyebrow i { width: 14px; height: 14px; }
.inspo-optimized-title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}
.inspo-optimized-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    z-index: 1;
}
.inspo-opt-block {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 11px;
    padding: 13px 16px;
}
.inspo-opt-block-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 8px;
}
.inspo-opt-block-label i { width: 12px; height: 12px; color: #4ade80; }
.inspo-opt-hook {
    font-size: 17px;
    font-weight: 700;
    color: #f1f5f9;
    line-height: 1.4;
    letter-spacing: -0.01em;
}
.inspo-opt-body-text {
    font-size: 14px;
    color: #e2e8f0;
    line-height: 1.65;
}
.inspo-opt-cta {
    font-size: 15px;
    font-weight: 600;
    color: #4ade80;
}

/* Cambios clave */
.inspo-opt-changes {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(34, 197, 94, 0.04);
    border: 1px dashed rgba(34, 197, 94, 0.25);
    border-radius: 11px;
    position: relative;
    z-index: 1;
}
.inspo-opt-changes-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #4ade80;
    font-weight: 700;
    margin-bottom: 10px;
}
.inspo-opt-changes-label i { width: 13px; height: 13px; }
.inspo-opt-changes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.inspo-opt-changes-list li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 12.5px;
    color: #cbd5e1;
    line-height: 1.55;
}
.inspo-opt-changes-list li > i {
    width: 13px;
    height: 13px;
    color: #4ade80;
    flex-shrink: 0;
    margin-top: 3px;
}

.inspo-opt-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
    z-index: 1;
}

/* ── Cómo replicar (steps numerados) ── */
.inspo-replicate {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 18px 22px;
}
.inspo-replicate-steps {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.inspo-replicate-step {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 12px 14px;
    background: rgba(99, 102, 241, 0.05);
    border: 1px solid rgba(99, 102, 241, 0.15);
    border-radius: 10px;
}
.inspo-replicate-num {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    font-weight: 800;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}
.inspo-replicate-text {
    font-size: 13px;
    color: #e2e8f0;
    line-height: 1.55;
    flex: 1;
    min-width: 0;
}

@media (max-width: 600px) {
    .inspo-optimized { padding: 18px; }
    .inspo-optimized-title { font-size: 17px; }
    .inspo-opt-hook { font-size: 15px; }
}

/* ── Detail grid: Visual + Estructura lado a lado ── */
.inspo-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
@media (max-width: 700px) {
    .inspo-detail-grid { grid-template-columns: 1fr; }
}

/* ── Guión hablado redesign ── */
.inspo-card-script .inspo-card-v2-head { display: flex; align-items: center; justify-content: space-between; }
.inspo-tag-tone { font-size: 11px; padding: 3px 10px; gap: 4px; display: inline-flex; align-items: center; }
.inspo-tag-tone i { width: 11px; height: 11px; }
.inspo-script-hook-block { margin-bottom: 14px; }
.inspo-script-hook-block .inspo-script-label { display: flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: #94a3b8; font-weight: 700; margin-bottom: 8px; }
.inspo-script-hook-block .inspo-script-label i { width: 12px; height: 12px; color: #facc15; }
.inspo-script-phrases .inspo-script-label { display: flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.7px; color: #94a3b8; font-weight: 700; margin-bottom: 8px; }
.inspo-script-phrases .inspo-script-label i { width: 12px; height: 12px; color: #a78bfa; }
.inspo-quote-mark { color: #6366f1; font-weight: 800; font-size: 1.1em; }

/* ── Visual analysis icons ── */
.inspo-visual-item strong { display: flex; align-items: center; gap: 5px; }
.inspo-visual-item strong i { width: 13px; height: 13px; color: #818cf8; flex-shrink: 0; }

/* ── Plan de acción ── */
.inspo-card-plan { position: relative; overflow: hidden; }
.inspo-card-plan::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, #6366f1, #a855f7, #ec4899);
}
.inspo-card-plan .inspo-card-v2-eyebrow i { color: #a78bfa; }
.inspo-plan-steps {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.inspo-plan-step {
    display: flex; gap: 14px; align-items: flex-start;
    padding: 12px 14px;
    background: rgba(99, 102, 241, 0.04);
    border: 1px solid rgba(99, 102, 241, 0.12);
    border-radius: 10px;
    transition: border-color 0.2s, background 0.2s;
}
.inspo-plan-step:hover {
    border-color: rgba(99, 102, 241, 0.3);
    background: rgba(99, 102, 241, 0.08);
}
.inspo-plan-num {
    width: 28px; height: 28px; border-radius: 8px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff; font-weight: 800; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-variant-numeric: tabular-nums;
}
.inspo-plan-text {
    font-size: 13px; color: #e2e8f0; line-height: 1.55;
    flex: 1; min-width: 0;
}

/* ============================================================
   INSPO V2 — FILTERS PANEL (estilo getpoppy.ai)
   ============================================================ */

/* Botón "Filtros" dentro del input shell */
.inspo-filters-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    flex-shrink: 0;
    margin-right: 4px;
    min-height: 38px;
    white-space: nowrap;
}
.inspo-filters-toggle i { width: 14px; height: 14px; }
.inspo-filters-toggle:hover {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.3);
    color: #f1f5f9;
}
.inspo-filters-toggle.is-open {
    background: rgba(168, 85, 247, 0.18);
    border-color: rgba(168, 85, 247, 0.4);
    color: #c4b5fd;
}
.inspo-filters-toggle.is-active {
    border-color: rgba(168, 85, 247, 0.45);
    color: #c4b5fd;
}
.inspo-filters-badge {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* Panel de filtros (debajo del input) */
.inspo-filters-panel {
    margin-top: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 12px;
    padding: 16px 18px;
    animation: inspoFadeIn 0.18s ease-out;
}
.inspo-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}
.inspo-filter-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.inspo-filter-field > span {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #94a3b8;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.inspo-filter-field > span i {
    width: 12px;
    height: 12px;
    color: #a5b4fc;
}
.inspo-filter-field select,
.inspo-filter-field input {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 8px 10px;
    color: #f1f5f9;
    font-size: 13px;
    min-height: 36px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
    color-scheme: dark;
}
.inspo-filter-field select:focus,
.inspo-filter-field input:focus {
    outline: none;
    border-color: rgba(168, 85, 247, 0.5);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.12);
}
.inspo-filters-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.08);
}
.inspo-filters-clear {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.12s, color 0.12s;
}
.inspo-filters-clear i { width: 12px; height: 12px; }
.inspo-filters-clear:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.25);
    color: #f87171;
}

@media (max-width: 600px) {
    .inspo-filters-toggle span { display: none; }
    .inspo-filters-toggle { padding: 8px; }
    .inspo-filters-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
}

/* ============================================================
   INSPO V2 — PICKER TOOLBAR + TABS + SORT + MULTI-SELECT
   ============================================================ */

/* Toolbar superior: back + view tabs + sort */
.inspo-picker-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

/* View tabs (Resultados | Favoritos) */
.inspo-view-tabs {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.inspo-view-tab {
    background: transparent;
    border: none;
    color: #94a3b8;
    border-radius: 7px;
    padding: 7px 13px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background 0.12s, color 0.12s;
    min-height: 34px;
}
.inspo-view-tab i { width: 14px; height: 14px; }
.inspo-view-tab:hover { color: #e2e8f0; }
.inspo-view-tab.is-active {
    background: rgba(168, 85, 247, 0.18);
    color: #f1f5f9;
}
.inspo-view-count {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #94a3b8;
    min-width: 18px;
    text-align: center;
}
.inspo-view-tab.is-active .inspo-view-count {
    background: rgba(168, 85, 247, 0.3);
    color: #e9d5ff;
}

/* Sort dropdown */
.inspo-sort-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9px;
    padding: 4px 10px;
    transition: border-color 0.15s;
}
.inspo-sort-wrap:focus-within {
    border-color: rgba(168, 85, 247, 0.4);
}
.inspo-sort-icon {
    width: 14px;
    height: 14px;
    color: #94a3b8;
}
.inspo-sort-select {
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    padding: 6px 0;
    color-scheme: dark;
}
.inspo-sort-select:focus { outline: none; }

/* Meta strip (count + query) */
.inspo-results-meta-strip {
    font-size: 13px;
    color: #94a3b8;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.inspo-results-meta-strip strong {
    color: #f1f5f9;
    font-weight: 700;
}

/* Multi-select checkbox en card */
.inspo-pick-card-v2 { position: relative; }
.inspo-pick-check {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s, transform 0.15s, background 0.15s, border-color 0.15s;
}
.inspo-pick-card-v2:hover .inspo-pick-check,
.inspo-pick-check.is-checked {
    opacity: 1;
    transform: scale(1);
}
.inspo-pick-check.is-checked {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    border-color: transparent;
}
.inspo-pick-check input { display: none; }
.inspo-pick-check-mark {
    color: #fff;
    opacity: 0;
    transition: opacity 0.15s;
    display: inline-flex;
}
.inspo-pick-check-mark i { width: 14px; height: 14px; }
.inspo-pick-check.is-checked .inspo-pick-check-mark { opacity: 1; }

/* Card seleccionada */
.inspo-pick-card-v2.is-selected {
    border-color: rgba(168, 85, 247, 0.5);
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.4), 0 12px 28px -8px rgba(168, 85, 247, 0.3);
}

/* Botón quitar de favoritos */
.inspo-pick-card-remove {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #f87171;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.15s, transform 0.15s, background 0.15s;
}
.inspo-pick-card-v2:hover .inspo-pick-card-remove {
    opacity: 1;
    transform: scale(1);
}
.inspo-pick-card-remove:hover {
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
    border-color: transparent;
}
.inspo-pick-card-remove i { width: 14px; height: 14px; }

/* Selection bar (sticky bottom cuando hay items seleccionados) */
.inspo-selection-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(135deg, #1e1b2e, #161423);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 14px;
    padding: 12px 16px 12px 22px;
    box-shadow: 0 24px 60px -10px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(168, 85, 247, 0.2);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.inspo-selection-bar.is-visible {
    transform: translateX(-50%) translateY(0);
}
.inspo-selection-count {
    font-size: 13.5px;
    color: #cbd5e1;
}
.inspo-selection-count strong {
    color: #c4b5fd;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.inspo-selection-clear {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #94a3b8;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s;
}
.inspo-selection-clear:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
}
.inspo-selection-save {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 6px 18px -6px rgba(99, 102, 241, 0.5);
    transition: filter 0.12s;
}
.inspo-selection-save i { width: 14px; height: 14px; }
.inspo-selection-save:hover { filter: brightness(1.08); }
.inspo-selection-save:disabled { opacity: 0.6; cursor: wait; }

@media (max-width: 600px) {
    .inspo-picker-toolbar { gap: 8px; }
    .inspo-sort-wrap { margin-left: 0; width: 100%; justify-content: space-between; }
    .inspo-view-tabs { flex: 1; }
    .inspo-view-tab { flex: 1; justify-content: center; }
    .inspo-selection-bar {
        left: 12px;
        right: 12px;
        bottom: 12px;
        transform: translateY(120%);
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .inspo-selection-bar.is-visible { transform: translateY(0); }
    .inspo-selection-save { flex: 1; justify-content: center; }
}

/* ============================================================
   INSPO V3 — Search row horizontal limpio (estilo getpoppy.ai)
   ============================================================ */

.inspo-input-card-v3 {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 16px 18px;
    margin-bottom: 22px;
}

/* Search row: input + filtros + buscar todo en una línea */
.inspo-search-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

/* Input shell ya existe, ajusto */
.inspo-search-row .inspo-input-shell {
    flex: 1;
    min-width: 0;
    border-radius: 11px;
    padding: 0 4px 0 14px;
    height: 48px;
}
.inspo-search-row .inspo-input-v2 {
    padding: 12px 8px;
    font-size: 14px;
}

/* Botón "Filtros" alineado al input height */
.inspo-search-row .inspo-filters-toggle {
    height: 48px;
    margin: 0;
    padding: 0 14px;
    border-radius: 11px;
    flex-shrink: 0;
}

/* CTA Buscar */
.inspo-search-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    border: none;
    border-radius: 11px;
    padding: 0 22px;
    height: 48px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.12s, transform 0.15s, box-shadow 0.18s;
    box-shadow: 0 8px 24px -8px rgba(99, 102, 241, 0.5);
    flex-shrink: 0;
    white-space: nowrap;
}
.inspo-search-cta i { width: 16px; height: 16px; }
.inspo-search-cta:hover:not(:disabled) {
    filter: brightness(1.06);
    transform: translateY(-1px);
    box-shadow: 0 12px 32px -6px rgba(99, 102, 241, 0.65);
}
.inspo-search-cta:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

/* Secondary row: hint + chips en una línea */
.inspo-secondary-row {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 18px;
    align-items: center;
    justify-content: space-between;
}
.inspo-secondary-row .inspo-input-hint {
    margin: 0;
    flex: 1;
    min-width: 240px;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
}
.inspo-secondary-row .inspo-suggest-row {
    margin: 0;
    flex: 0 0 auto;
}
.inspo-secondary-row .inspo-suggest-label {
    color: #64748b;
    font-size: 10.5px;
}
.inspo-secondary-row .inspo-suggest-chip {
    padding: 4px 10px;
    font-size: 11.5px;
}

/* Cliente activo como pill discreta */
.inspo-client-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    background: rgba(99, 102, 241, 0.08);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: 999px;
    padding: 6px 12px 6px 10px;
    font-size: 12px;
    color: #94a3b8;
    max-width: fit-content;
}
.inspo-client-pill > i {
    width: 13px;
    height: 13px;
    color: #a5b4fc;
}
.inspo-client-pill strong {
    color: #c4b5fd;
    font-weight: 600;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inspo-client-pill-change {
    margin-left: 4px;
    background: transparent;
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
}
.inspo-client-pill-change:hover {
    background: rgba(99, 102, 241, 0.18);
    color: #e9d5ff;
}

/* Mobile: stack vertical */
@media (max-width: 760px) {
    .inspo-search-row {
        flex-wrap: wrap;
    }
    .inspo-search-row .inspo-input-shell {
        flex: 1 1 100%;
        order: 1;
    }
    .inspo-search-row .inspo-filters-toggle {
        order: 2;
        flex: 1;
    }
    .inspo-search-cta {
        order: 3;
        flex: 2;
        justify-content: center;
    }
    .inspo-secondary-row {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .inspo-secondary-row .inspo-suggest-row {
        flex-wrap: wrap;
    }
}

/* ============================================================
   INSPO V3 — IFRAME DIRECTO + FALLBACK DEBAJO (definitive solution)
   ============================================================ */

.inspo-pick-creative-iframe-wrap {
    position: relative;
    overflow: hidden;
    background: #0d0a17;
    /* aspect-ratio + height ya vienen de .inspo-pick-creative */
}

/* Fallback (avatar marca) — capa BASE, siempre visible si iframe falla */
.inspo-pick-creative-fallback-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg,
            hsl(var(--brand-hue, 260) 35% 14%) 0%,
            hsl(var(--brand-hue, 260) 25% 10%) 100%);
}
.inspo-pick-creative-fallback-bg .inspo-creative-fallback-bg {
    position: absolute;
    inset: -50%;
    background:
        radial-gradient(circle at 30% 30%,
            hsl(var(--brand-hue, 260) 60% 40% / 0.3) 0%,
            transparent 50%),
        radial-gradient(circle at 70% 70%,
            hsl(calc(var(--brand-hue, 260) + 60) 70% 50% / 0.2) 0%,
            transparent 50%);
    filter: blur(40px);
    opacity: 0.8;
    pointer-events: none;
}
.inspo-pick-creative-fallback-bg .inspo-creative-fallback-avatar {
    position: relative;
    z-index: 1;
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: hsl(var(--brand-hue, 260) 80% 88%);
    background: linear-gradient(135deg,
        hsl(var(--brand-hue, 260) 50% 25%),
        hsl(calc(var(--brand-hue, 260) + 30) 60% 30%));
    box-shadow:
        0 12px 32px -8px hsl(var(--brand-hue, 260) 60% 20% / 0.6),
        inset 0 1px 0 hsl(var(--brand-hue, 260) 80% 70% / 0.2);
}

/* Iframe — capa SUPERIOR. Si Meta lo permite embed, cubre al fallback */
.inspo-pick-creative-iframe {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    /* Si el iframe se carga vacío (X-Frame blocked), permanece transparente
       y se ve el fallback de atrás */
    color-scheme: light;
}

/* Overlay clickable — capa MÁS ALTA (z-3) para capturar clicks del card */
.inspo-pick-creative-iframe-wrap > .inspo-pick-creative-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(180deg, transparent 60%, rgba(20, 18, 32, 0.45) 100%);
    cursor: pointer;
    transition: background 0.2s;
}
.inspo-pick-card-v2:hover .inspo-pick-creative-iframe-wrap > .inspo-pick-creative-overlay {
    background: linear-gradient(180deg, transparent 50%, rgba(168, 85, 247, 0.25) 100%);
}

/* ============================================================
   INSPO V3 — Pick card con media REAL desde Apify
   ============================================================ */

.inspo-pick-card-v3 {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    transition: border-color 0.18s, transform 0.18s, box-shadow 0.18s;
    position: relative;
}
.inspo-pick-card-v3:hover,
.inspo-pick-card-v3:focus-visible {
    border-color: rgba(168, 85, 247, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.5);
    outline: none;
}
.inspo-pick-card-v3.is-selected {
    border-color: rgba(168, 85, 247, 0.6);
    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.4), 0 12px 28px -8px rgba(168, 85, 247, 0.3);
}

/* Media block (top de la card) */
.inspo-pick-v3-media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #0d0a17;
    overflow: hidden;
}
.inspo-pick-v3-img,
.inspo-pick-v3-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.inspo-pick-v3-media-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #fff;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-weight: 600;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.inspo-pick-v3-media-badge i { width: 12px; height: 12px; }

/* Fallback (cuando no hay media_url de Apify) */
.inspo-pick-v3-media-fallback {
    background: transparent;
}
.inspo-pick-v3-media-fallback .inspo-pick-creative-fallback-bg {
    position: absolute;
    inset: 0;
}

/* Header con brand */
.inspo-pick-v3-header {
    padding: 12px 14px 8px;
}
.inspo-pick-v3-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.inspo-pick-v3-avatar {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: hsl(var(--brand-hue, 260) 80% 85%);
    background: linear-gradient(135deg,
        hsl(var(--brand-hue, 260) 50% 25%),
        hsl(calc(var(--brand-hue, 260) + 30) 60% 30%));
    flex-shrink: 0;
}
.inspo-pick-v3-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.inspo-pick-v3-name {
    font-size: 13px;
    font-weight: 700;
    color: #f1f5f9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inspo-pick-v3-sub {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #94a3b8;
}
.inspo-pick-v3-sub i { width: 11px; height: 11px; }
.inspo-pick-v3-sub > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.inspo-pick-v3-plats {
    display: inline-flex;
    gap: 4px;
}
.inspo-pick-v3-plats .inspo-plat-badge-v2 {
    padding: 1px 6px;
    font-size: 9.5px;
}

/* Content body */
.inspo-pick-v3-content {
    padding: 4px 14px 12px;
    flex: 1;
}
.inspo-pick-v3-headline {
    font-size: 13.5px;
    font-weight: 600;
    color: #e2e8f0;
    line-height: 1.4;
    margin-bottom: 6px;
}
.inspo-pick-v3-body {
    font-size: 12.5px;
    color: #94a3b8;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Footer con acciones */
.inspo-pick-v3-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: auto;
}
.inspo-pick-v3-snap {
    font-size: 12px;
    font-weight: 600;
    color: #c7d2fe;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 11px;
    border-radius: 8px;
    background: rgba(99, 102, 241, 0.12);
    border: 1px solid rgba(99, 102, 241, 0.28);
    transition: all 0.15s ease;
}
.inspo-pick-v3-snap i { width: 13px; height: 13px; }
.inspo-pick-v3-snap:hover {
    color: #fff;
    background: rgba(99, 102, 241, 0.22);
    border-color: rgba(99, 102, 241, 0.5);
    transform: translateY(-1px);
}
.inspo-pick-v3-cta {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 13px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: filter 0.12s, transform 0.15s;
}
.inspo-pick-v3-cta i { width: 13px; height: 13px; }
.inspo-pick-v3-cta:hover {
    filter: brightness(1.08);
    transform: translateX(1px);
}

/* Footer 3 botones */
.inspo-pick-v3-footer-3btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 8px 10px 10px;
}
.inspo-pick-v3-btn {
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 7px;
    transition: all 0.15s ease;
    text-decoration: none;
    border: 1px solid transparent;
    line-height: 1;
}
.inspo-pick-v3-btn i { width: 12px; height: 12px; }
.inspo-btn-board {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.10);
    border-color: rgba(251, 191, 36, 0.25);
}
.inspo-btn-board:hover {
    background: rgba(251, 191, 36, 0.20);
    border-color: rgba(251, 191, 36, 0.45);
    transform: translateY(-1px);
}
.inspo-btn-board.is-saved {
    color: #34d399;
    background: rgba(52, 211, 153, 0.12);
    border-color: rgba(52, 211, 153, 0.3);
    pointer-events: none;
}
.inspo-btn-meta {
    color: #c7d2fe;
    background: rgba(99, 102, 241, 0.10);
    border-color: rgba(99, 102, 241, 0.22);
}
.inspo-btn-meta:hover {
    color: #fff;
    background: rgba(99, 102, 241, 0.20);
    border-color: rgba(99, 102, 241, 0.45);
    transform: translateY(-1px);
}
.inspo-pick-v3-footer-3btn .inspo-pick-v3-cta {
    padding: 6px 12px;
    font-size: 11.5px;
    border-radius: 7px;
    flex-shrink: 0;
}

/* Popup de acción */
.inspo-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: inspoFadeIn 0.15s ease;
}
@keyframes inspoFadeIn { from { opacity: 0; } to { opacity: 1; } }
.inspo-popup-card {
    background: #1e1b2e;
    border: 1px solid rgba(139, 92, 246, 0.25);
    border-radius: 16px;
    padding: 28px 32px;
    max-width: 400px;
    width: 90vw;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.inspo-popup-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: none;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px;
}
.inspo-popup-close:hover { color: #fff; }
.inspo-popup-close i { width: 18px; height: 18px; }
.inspo-popup-header {
    text-align: center;
    margin-bottom: 20px;
}
.inspo-popup-header > i {
    width: 28px;
    height: 28px;
    color: #a78bfa;
    margin-bottom: 8px;
}
.inspo-popup-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: #f1f5f9;
    margin: 0 0 4px;
}
.inspo-popup-brand {
    font-size: 13px;
    color: #94a3b8;
    margin: 0;
}
.inspo-popup-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.inspo-popup-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.03);
}
.inspo-popup-btn > i {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
.inspo-popup-btn span {
    font-size: 14px;
    font-weight: 600;
    color: #f1f5f9;
    display: block;
}
.inspo-popup-btn small {
    font-size: 12px;
    color: #94a3b8;
    font-weight: 400;
    display: block;
    margin-top: 2px;
}
.inspo-popup-analyze {
    border-color: rgba(139, 92, 246, 0.3);
}
.inspo-popup-analyze > i { color: #a78bfa; }
.inspo-popup-analyze:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.5);
    transform: translateY(-1px);
}
.inspo-popup-meta {
    border-color: rgba(99, 102, 241, 0.2);
}
.inspo-popup-meta > i { color: #818cf8; }
.inspo-popup-meta:hover {
    background: rgba(99, 102, 241, 0.1);
    border-color: rgba(99, 102, 241, 0.4);
    transform: translateY(-1px);
}

/* ============================================================
   INSPO V3 — Winners banner + winner badges en cards
   ============================================================ */

.inspo-winners-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background:
        linear-gradient(135deg,
            rgba(251, 191, 36, 0.1) 0%,
            rgba(245, 158, 11, 0.06) 50%,
            rgba(217, 119, 6, 0.04) 100%);
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 12px;
    padding: 11px 16px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #cbd5e1;
}
.inspo-winners-banner > i {
    width: 18px;
    height: 18px;
    color: #fbbf24;
    flex-shrink: 0;
}
.inspo-winners-banner > span {
    flex: 1;
    line-height: 1.5;
}
.inspo-winners-banner strong {
    color: #fbbf24;
    font-weight: 700;
}
.inspo-winners-banner-close {
    background: transparent;
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s;
    flex-shrink: 0;
    white-space: nowrap;
}
.inspo-winners-banner-close:hover {
    background: rgba(251, 191, 36, 0.15);
}

@media (max-width: 600px) {
    .inspo-winners-banner {
        flex-wrap: wrap;
        font-size: 12px;
    }
    .inspo-winners-banner > span {
        flex: 1 1 100%;
    }
    .inspo-winners-banner-close {
        margin-left: auto;
    }
}

/* ============================================================
   INSPO HERO V3 — copy "ganadores" con tratamiento gradient
   ============================================================ */

.inspo-hero-title-v2 em {
    font-style: normal;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    display: inline-block;
    font-weight: 800;
}
.inspo-hero-title-v2 em::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.05em;
    height: 0.18em;
    background: linear-gradient(90deg, rgba(251, 191, 36, 0.35), rgba(245, 158, 11, 0.15));
    border-radius: 4px;
    z-index: -1;
}

/* ============================================================
   INSPO EXPLORER — Mode tabs + Niche chips + Grid + Cards
   ============================================================ */

/* Mode tabs (Explorer / Búsqueda) */
.inspo-mode-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 6px;
}
.inspo-mode-tab {
    background: transparent;
    border: none;
    border-radius: 10px;
    padding: 12px 16px;
    color: #94a3b8;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 2px;
    text-align: left;
}
.inspo-mode-tab i {
    width: 18px;
    height: 18px;
    grid-row: 1 / 3;
    align-self: center;
    color: #94a3b8;
}
.inspo-mode-tab span {
    font-size: 14px;
    font-weight: 600;
    color: #cbd5e1;
}
.inspo-mode-tab small {
    font-size: 11px;
    color: #64748b;
}
.inspo-mode-tab:hover { background: rgba(255, 255, 255, 0.04); }
.inspo-mode-tab.is-active {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.15), rgba(168, 85, 247, 0.1));
    border: 1px solid rgba(168, 85, 247, 0.3);
}
.inspo-mode-tab.is-active i,
.inspo-mode-tab.is-active span { color: #f1f5f9; }
.inspo-mode-tab.is-active small { color: #94a3b8; }

/* Explorer wrap */
.inspo-explorer-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Niche chips */
.inspo-explorer-niches {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.inspo-niche-chip {
    --niche-color: #a855f7;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border-radius: 10px;
    padding: 8px 13px;
    font-size: 12.5px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
    min-height: 36px;
    white-space: nowrap;
}
.inspo-niche-chip i { width: 14px; height: 14px; color: var(--niche-color); }
.inspo-niche-chip small {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
}
.inspo-niche-chip small.empty { color: #475569; }
.inspo-niche-chip:hover {
    border-color: var(--niche-color);
    color: #f1f5f9;
    transform: translateY(-1px);
}
.inspo-niche-chip.is-active {
    background: color-mix(in srgb, var(--niche-color) 15%, transparent);
    border-color: var(--niche-color);
    color: #f1f5f9;
    box-shadow: 0 0 0 1px var(--niche-color);
}
.inspo-niche-chip.is-active small {
    background: color-mix(in srgb, var(--niche-color) 25%, transparent);
    color: #fff;
}

/* Toolbar de filtros del Explorer */
.inspo-explorer-toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}
.inspo-explorer-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 4px 10px;
    transition: border-color 0.15s;
}
.inspo-explorer-filter:focus-within { border-color: rgba(168, 85, 247, 0.4); }
.inspo-explorer-filter > i { width: 14px; height: 14px; color: #a5b4fc; flex-shrink: 0; }
.inspo-explorer-filter select {
    flex: 1;
    background: transparent;
    border: none;
    color: #e2e8f0;
    font-size: 13px;
    padding: 8px 0;
    cursor: pointer;
    color-scheme: dark;
    min-width: 0;
}
.inspo-explorer-filter select:focus { outline: none; }

/* Meta info */
.inspo-explorer-meta {
    font-size: 12.5px;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}
.inspo-explorer-meta strong {
    color: #f1f5f9;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.inspo-explorer-refreshed {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #64748b;
}
.inspo-explorer-refreshed i { width: 11px; height: 11px; }

/* Grid de cards (4 cols desktop, responsive) */
.inspo-explorer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

/* Card Explorer (extiende v3 pero con badge de días activos) */
.inspo-explorer-card .inspo-pick-v3-media { aspect-ratio: 4 / 5; }
.inspo-pick-v3-days-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 10.5px;
    font-weight: 700;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.inspo-pick-v3-days-badge i { width: 10px; height: 10px; color: #fbbf24; }
.inspo-pick-v3-days-badge.is-winner { background: linear-gradient(135deg, rgba(34,197,94,0.9), rgba(22,163,74,0.95)); }
.inspo-pick-v3-days-badge.is-winner i { color: #fff; }
.inspo-pick-v3-days-badge.is-top { background: linear-gradient(135deg, rgba(168,85,247,0.9), rgba(124,58,237,0.95)); }
.inspo-pick-v3-days-badge.is-top i { color: #fff; }
.inspo-pick-v3-days-badge.is-legacy { background: linear-gradient(135deg, rgba(251,191,36,0.95), rgba(245,158,11,0.95)); color: #1a1a1a; }
.inspo-pick-v3-days-badge.is-legacy i { color: #1a1a1a; }

/* Skeleton loading */
.inspo-explorer-skeleton {
    aspect-ratio: 3 / 4;
    background: linear-gradient(135deg, #1e1b2e 0%, #161423 100%);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}
.inspo-explorer-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(168,85,247,0.08), transparent);
    animation: inspoShimmer 1.6s linear infinite;
}

/* Empty state */
.inspo-explorer-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 14px;
}
.inspo-explorer-empty i {
    width: 48px;
    height: 48px;
    color: #475569;
    margin-bottom: 12px;
}
.inspo-explorer-empty h4 {
    margin: 0 0 8px;
    font-size: 17px;
    color: #f1f5f9;
    font-weight: 600;
}
.inspo-explorer-empty p {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.55;
}

/* Load more */
.inspo-explorer-load-more {
    text-align: center;
    padding: 20px 0;
}
#inspoExplorerLoadMoreBtn {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.12s, transform 0.12s;
}
#inspoExplorerLoadMoreBtn:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Responsive */
@media (max-width: 600px) {
    .inspo-mode-tabs { grid-template-columns: 1fr; }
    .inspo-explorer-grid { grid-template-columns: 1fr 1fr; }
    .inspo-niche-chip span { display: none; }
    .inspo-niche-chip { padding: 8px 11px; }
}

/* ============================================================
   INSPO V3 — Empty state con sugerencias por categoría
   ============================================================ */

.inspo-suggestions {
    margin-top: 24px;
}
.inspo-suggestions-head {
    text-align: center;
    margin-bottom: 18px;
}
.inspo-suggestions-head h3 {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #f1f5f9;
    letter-spacing: -0.01em;
}
.inspo-suggestions-head p {
    margin: 0;
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.5;
}

.inspo-suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}

button.inspo-suggest-tile {
    --tile-color: #a855f7;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 18px 16px;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.18s, transform 0.18s, background 0.18s;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    color: #f1f5f9;
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 130px;
    font-family: inherit;
    font-size: inherit;
}
button.inspo-suggest-tile > .inspo-suggest-tile-title,
button.inspo-suggest-tile > .inspo-suggest-tile-sub {
    display: block;
    width: 100%;
}
.inspo-suggest-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, color-mix(in srgb, var(--tile-color) 14%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.inspo-suggest-tile:hover {
    border-color: var(--tile-color);
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.05);
}
.inspo-suggest-tile:hover::before {
    opacity: 1;
}
.inspo-suggest-tile-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--tile-color) 18%, transparent);
    color: var(--tile-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}
.inspo-suggest-tile-icon i { width: 20px; height: 20px; }
.inspo-suggest-tile-title {
    font-size: 14px;
    font-weight: 700;
    color: #f1f5f9;
    z-index: 1;
}
.inspo-suggest-tile-sub {
    font-size: 11.5px;
    color: #94a3b8;
    line-height: 1.45;
    z-index: 1;
}

@media (max-width: 600px) {
    .inspo-suggestions-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .inspo-suggest-tile {
        padding: 14px 12px;
    }
    .inspo-suggest-tile-icon {
        width: 32px;
        height: 32px;
    }
}

/* ===========================================================
 * PUBLISH WIZARD V2
 * =========================================================== */
.pwv2-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 20px; overflow-y: auto; }
.pwv2-card { background: #0f172a; border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0,0,0,0.6); overflow: hidden; }
.pwv2-head { padding: 20px 24px 16px; border-bottom: 1px solid rgba(255,255,255,0.06); }
.pwv2-head-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.pwv2-head-title { color: #fff; font-size: 18px; font-weight: 700; }
.pwv2-close { background: transparent; border: none; color: #94a3b8; cursor: pointer; padding: 6px; border-radius: 6px; }
.pwv2-close:hover { background: rgba(255,255,255,0.06); color: #fff; }
.pwv2-progress { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; margin-bottom: 10px; }
.pwv2-progress-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #a855f7); transition: width 0.3s; }
.pwv2-head-step { font-size: 12px; color: #94a3b8; }
.pwv2-head-step span { color: #cbd5e1; font-weight: 500; }

.pwv2-options { display: flex; flex-direction: column; gap: 10px; padding: 20px 24px; overflow-y: auto; }
.pwv2-option { display: flex; align-items: center; gap: 14px; padding: 14px 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; color: #fff; cursor: pointer; text-align: left; transition: all 0.15s; width: 100%; }
.pwv2-option:hover { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.3); transform: translateY(-1px); }
.pwv2-option.is-active { background: rgba(99,102,241,0.12); border-color: #6366f1; }
.pwv2-option-icon { width: 42px; height: 42px; flex: 0 0 42px; background: rgba(99,102,241,0.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #a5b4fc; }
.pwv2-option-icon i { width: 22px; height: 22px; }
.pwv2-option-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pwv2-option-text strong { color: #fff; font-size: 14.5px; font-weight: 600; }
.pwv2-option-text span { color: #94a3b8; font-size: 12.5px; line-height: 1.4; }
.pwv2-option-arrow { color: #64748b; width: 18px; height: 18px; flex: 0 0 18px; }

.pwv2-fields { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.pwv2-field { display: flex; flex-direction: column; gap: 6px; }
.pwv2-field label { color: #cbd5e1; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pwv2-field label i { width: 14px; height: 14px; color: #a5b4fc; }
.pwv2-select, .pwv2-fields input[type="number"], .pwv2-fields input[type="text"] { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #fff; padding: 10px 12px; font-size: 14px; font-family: inherit; }
.pwv2-select:focus { outline: none; border-color: #6366f1; }
.pwv2-select-sm { padding: 6px 10px; font-size: 13px; }
.pwv2-currency-display { padding: 10px 14px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); border-radius: 8px; display: flex; flex-direction: column; gap: 2px; }
.pwv2-currency-display strong { color: #86efac; font-size: 18px; }
.pwv2-hint { color: #94a3b8; font-size: 12px; }

.pwv2-budget-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 20px 24px 0; }
.pwv2-budget-card { padding: 14px 16px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px; color: #fff; transition: all 0.15s; }
.pwv2-budget-card:hover { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.3); }
.pwv2-budget-card.is-active { background: rgba(99,102,241,0.15); border-color: #6366f1; }
.pwv2-budget-card strong { color: #fff; font-size: 17px; }
.pwv2-budget-card span { color: #94a3b8; font-size: 12.5px; }
.pwv2-budget-custom { grid-column: 1 / -1; }
.pwv2-custom-input { padding: 0 24px; margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.pwv2-custom-input label { color: #cbd5e1; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pwv2-custom-input input { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #fff; padding: 10px 12px; font-size: 14px; }
.pwv2-budget-note { padding: 12px 24px 4px; color: #94a3b8; font-size: 12.5px; display: flex; gap: 8px; align-items: flex-start; }
.pwv2-budget-note i { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; color: #a5b4fc; }

.pwv2-extras { padding: 16px 24px; border-top: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; gap: 12px; }
.pwv2-extras-title { color: #cbd5e1; font-size: 13px; font-weight: 600; }
.pwv2-segctrl { display: flex; gap: 8px; background: rgba(255,255,255,0.04); border-radius: 10px; padding: 4px; }
.pwv2-seg { flex: 1; padding: 9px 12px; background: transparent; border: none; color: #94a3b8; cursor: pointer; border-radius: 7px; font-size: 13px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; }
.pwv2-seg.is-active { background: rgba(99,102,241,0.2); color: #fff; }
.pwv2-seg i { width: 14px; height: 14px; }
.pwv2-variants { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pwv2-variant { padding: 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; display: flex; flex-direction: column; gap: 8px; }
.pwv2-variant-head { color: #fff; font-size: 13px; font-weight: 700; }
.pwv2-variant label { display: flex; flex-direction: column; gap: 4px; color: #94a3b8; font-size: 12px; }
.pwv2-variant input[type="number"] { width: 60px; display: inline-block; }

.pwv2-recommend { padding: 12px 14px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); border-radius: 10px; display: flex; gap: 10px; align-items: flex-start; color: #cbd5e1; font-size: 13px; }
.pwv2-recommend i { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; color: #86efac; }
.pwv2-recommend strong { color: #fff; }
.pwv2-recommend ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; }
.pwv2-recommend ul li b { color: #86efac; }

.pwv2-aud-list { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow-y: auto; padding-right: 4px; }
.pwv2-aud-item { display: flex; gap: 10px; padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; cursor: pointer; }
.pwv2-aud-item:hover { background: rgba(255,255,255,0.05); }
.pwv2-aud-item input[type="checkbox"] { margin-top: 3px; }
.pwv2-aud-item div { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.pwv2-aud-item strong { color: #fff; font-size: 13.5px; font-weight: 500; }
.pwv2-aud-item span { color: #94a3b8; font-size: 11.5px; }

.pwv2-empty { padding: 20px; background: rgba(245,158,11,0.08); border: 1px solid rgba(245,158,11,0.2); border-radius: 10px; text-align: center; color: #cbd5e1; font-size: 13.5px; }
.pwv2-empty i { color: #fbbf24; width: 28px; height: 28px; margin: 0 auto 8px; display: block; }
.pwv2-empty strong { display: block; margin-bottom: 6px; color: #fff; }
.pwv2-empty p { margin: 0; }
.pwv2-loading { display: flex; gap: 8px; align-items: center; color: #94a3b8; padding: 16px; justify-content: center; }
.pwv2-loading i { animation: pwv2spin 1s linear infinite; width: 16px; height: 16px; }
@keyframes pwv2spin { to { transform: rotate(360deg); } }

.pwv2-assistant { padding: 16px 24px; display: flex; flex-direction: column; gap: 16px; overflow-y: auto; }
.pwv2-aq { display: flex; flex-direction: column; gap: 8px; }
.pwv2-aq-title { color: #fff; font-weight: 600; font-size: 14px; }
.pwv2-aq-options { display: flex; flex-direction: column; gap: 6px; }
.pwv2-aq-btn { padding: 10px 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; color: #cbd5e1; cursor: pointer; text-align: left; transition: all 0.15s; font-size: 13.5px; }
.pwv2-aq-btn:hover { background: rgba(99,102,241,0.08); }
.pwv2-aq-btn.is-active { background: rgba(99,102,241,0.18); border-color: #6366f1; color: #fff; }
.pwv2-assistant-result { display: flex; gap: 12px; padding: 14px 16px; background: linear-gradient(135deg, rgba(99,102,241,0.15), rgba(168,85,247,0.1)); border: 1px solid rgba(99,102,241,0.3); border-radius: 12px; }
.pwv2-assistant-result-icon { width: 36px; height: 36px; flex: 0 0 36px; background: rgba(168,85,247,0.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #c084fc; }
.pwv2-assistant-result-body { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.pwv2-assistant-result-body span { color: #94a3b8; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.pwv2-assistant-result-body strong { color: #fff; font-size: 16px; }
.pwv2-assistant-result-body p { margin: 4px 0 0; color: #cbd5e1; font-size: 13px; line-height: 1.5; }

.pwv2-review { padding: 18px 24px 8px; display: flex; flex-direction: column; gap: 0; }
.pwv2-review-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.pwv2-review-row:last-child { border-bottom: none; }
.pwv2-review-row span { color: #94a3b8; font-size: 13px; }
.pwv2-review-row strong { color: #fff; font-size: 13.5px; font-weight: 600; text-align: right; }
.pwv2-review-flow { padding: 12px 24px 20px; display: flex; flex-direction: column; gap: 10px; }
.pwv2-flow-step { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; background: rgba(255,255,255,0.03); border-radius: 8px; }
.pwv2-flow-step span { width: 24px; height: 24px; flex: 0 0 24px; background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.pwv2-flow-step div { display: flex; flex-direction: column; gap: 2px; flex: 1; color: #cbd5e1; font-size: 12.5px; line-height: 1.45; }
.pwv2-flow-step strong { color: #fff; font-size: 13.5px; display: block; margin-bottom: 2px; }
.pwv2-flow-step em { font-style: normal; color: #a5b4fc; }

.pwv2-foot { display: flex; gap: 10px; justify-content: space-between; padding: 14px 24px; border-top: 1px solid rgba(255,255,255,0.06); background: rgba(0,0,0,0.2); }
.pwv2-btn { padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; border: none; display: inline-flex; align-items: center; gap: 6px; }
.pwv2-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pwv2-btn-ghost { background: transparent; color: #cbd5e1; border: 1px solid rgba(255,255,255,0.12); }
.pwv2-btn-ghost:hover:not(:disabled) { background: rgba(255,255,255,0.04); }
.pwv2-btn-primary { background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; }
.pwv2-btn-primary:hover:not(:disabled) { box-shadow: 0 4px 16px rgba(99,102,241,0.35); transform: translateY(-1px); }

.pwv2-publishing, .pwv2-success, .pwv2-error { padding: 40px 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pwv2-publishing-spinner i { width: 48px; height: 48px; color: #a5b4fc; animation: pwv2spin 1s linear infinite; }
.pwv2-publishing h2 { color: #fff; margin: 0; font-size: 20px; }
.pwv2-publishing p { color: #94a3b8; margin: 0; }
.pwv2-success-icon i { width: 60px; height: 60px; color: #22c55e; }
.pwv2-success h2 { color: #fff; margin: 0; font-size: 22px; }
.pwv2-success p { color: #cbd5e1; margin: 0; font-size: 14px; }
.pwv2-success-cta { display: flex; gap: 14px; padding: 16px 18px; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.25); border-radius: 12px; text-align: left; align-items: flex-start; max-width: 100%; }
.pwv2-success-cta i { width: 28px; height: 28px; flex: 0 0 28px; color: #a5b4fc; }
.pwv2-success-cta div { display: flex; flex-direction: column; gap: 4px; }
.pwv2-success-cta strong { color: #fff; font-size: 14px; }
.pwv2-success-cta span { color: #cbd5e1; font-size: 12.5px; line-height: 1.5; }
.pwv2-success-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; padding-top: 6px; }
.pwv2-success-actions .pwv2-btn { text-decoration: none; }
.pwv2-error-icon i { width: 56px; height: 56px; color: #ef4444; }
.pwv2-error h2 { color: #fff; margin: 0; }
.pwv2-error p { color: #cbd5e1; margin: 0; }
.pwv2-error-hint { padding: 12px 16px; background: rgba(99,102,241,0.1); border: 1px solid rgba(99,102,241,0.25); border-radius: 10px; color: #c7d2fe; font-size: 13.5px; line-height: 1.5; max-width: 480px; }

@media (max-width: 600px) {
    .pwv2-card { max-width: 100%; }
    .pwv2-budget-grid { grid-template-columns: 1fr; }
    .pwv2-variants { grid-template-columns: 1fr; }
}

/* === Armar Anuncio: selector de objetivo === */
.aa-obj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 6px; }
.aa-obj-card { padding: 10px 12px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 2px; transition: all 0.15s; }
.aa-obj-card:hover { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.3); }
.aa-obj-card.is-active { background: rgba(99,102,241,0.15); border-color: #6366f1; }
.aa-obj-card .aa-obj-icon { font-size: 18px; line-height: 1; }
.aa-obj-card strong { color: #fff; font-size: 13px; font-weight: 600; }
.aa-obj-card small { color: #94a3b8; font-size: 11px; }

/* === PLANNER === */
.plan-wrap { padding: 24px 32px; max-width: 1280px; margin: 0 auto; }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; gap: 20px; }
.plan-head h1 { color: #fff; font-size: 26px; margin: 0 0 6px; display: flex; align-items: center; gap: 10px; }
.plan-head h1 i { width: 26px; height: 26px; color: #a5b4fc; }
.plan-sub { color: #94a3b8; font-size: 14px; margin: 0; max-width: 600px; line-height: 1.55; }
.plan-new-btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 20px; background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; border: none; border-radius: 10px; font-weight: 600; font-size: 14px; cursor: pointer; transition: transform 0.15s; }
.plan-new-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,0.35); }
.plan-new-btn i { width: 16px; height: 16px; }

.plan-empty { text-align: center; padding: 60px 20px; color: #94a3b8; }
.plan-empty i { width: 60px; height: 60px; color: #475569; margin-bottom: 16px; }
.plan-empty h3 { color: #fff; font-size: 22px; margin: 0 0 10px; }
.plan-empty p { max-width: 520px; margin: 0 auto 20px; line-height: 1.6; }

.plan-list { display: flex; flex-direction: column; gap: 20px; }
.plan-card { background: #0f172a; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden; }
.plan-card-head { display: flex; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid rgba(255,255,255,0.05); align-items: flex-start; gap: 14px; }
.plan-card-title h3 { color: #fff; font-size: 17px; margin: 0 0 8px; font-weight: 700; }
.plan-card-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-meta-pill { padding: 4px 10px; background: rgba(255,255,255,0.05); border-radius: 16px; color: #cbd5e1; font-size: 11.5px; font-weight: 500; }
.plan-meta-pill.is-ready { background: rgba(34,197,94,0.15); color: #86efac; }
.plan-icon-btn { background: transparent; border: 1px solid rgba(255,255,255,0.1); padding: 7px; border-radius: 8px; color: #94a3b8; cursor: pointer; }
.plan-icon-btn:hover { background: rgba(239,68,68,0.1); color: #ef4444; border-color: rgba(239,68,68,0.3); }
.plan-icon-btn i { width: 15px; height: 15px; }

.plan-adsets { display: flex; flex-direction: column; gap: 12px; padding: 16px 22px; }
.plan-adset { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 10px; padding: 12px 14px; }
.plan-adset-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 10px; }
.plan-adset-name { background: transparent; border: none; color: #fff; font-weight: 600; font-size: 14px; flex: 1; padding: 4px 8px; border-radius: 6px; }
.plan-adset-name:focus { outline: none; background: rgba(255,255,255,0.05); }
.plan-adset-count { color: #94a3b8; font-size: 12px; font-weight: 600; padding: 3px 8px; background: rgba(255,255,255,0.04); border-radius: 6px; }

.plan-cards-row { display: flex; gap: 10px; flex-wrap: wrap; }
.plan-ad-mini { width: 140px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; overflow: hidden; position: relative; }
.plan-ad-mini.is-ready { border-color: rgba(34,197,94,0.3); }
.plan-ad-mini.is-pending { border-color: rgba(251,191,36,0.3); }
.plan-ad-remove { position: absolute; top: 4px; right: 4px; background: rgba(0,0,0,0.6); border: none; color: #fff; border-radius: 50%; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.15s; z-index: 2; }
.plan-ad-mini:hover .plan-ad-remove { opacity: 1; }
.plan-ad-remove i { width: 11px; height: 11px; }
.plan-ad-thumb { width: 100%; height: 100px; background: #1e293b; display: flex; align-items: center; justify-content: center; }
.plan-ad-thumb img { width: 100%; height: 100%; object-fit: cover; }
.plan-ad-noimg i { color: #475569; width: 26px; height: 26px; }
.plan-ad-meta { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.plan-ad-status { font-size: 12px; }
.plan-ad-meta strong { color: #fff; font-size: 12px; line-height: 1.3; font-weight: 500; }

.plan-add-ad { width: 140px; height: 162px; background: rgba(99,102,241,0.05); border: 2px dashed rgba(99,102,241,0.3); border-radius: 8px; color: #a5b4fc; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 12.5px; font-weight: 500; transition: all 0.15s; }
.plan-add-ad:hover { background: rgba(99,102,241,0.1); border-color: #6366f1; color: #fff; }
.plan-add-ad i { width: 20px; height: 20px; }

.plan-card-foot { display: flex; justify-content: space-between; padding: 14px 22px; border-top: 1px solid rgba(255,255,255,0.05); background: rgba(0,0,0,0.15); }
.plan-foot-btn { background: transparent; border: 1px solid rgba(255,255,255,0.12); color: #cbd5e1; padding: 8px 14px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.plan-foot-btn:hover { background: rgba(255,255,255,0.04); color: #fff; }
.plan-foot-btn i { width: 14px; height: 14px; }
.plan-publish-btn { background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; border: none; padding: 9px 18px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: 13.5px; transition: transform 0.15s; }
.plan-publish-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(34,197,94,0.3); }
.plan-publish-btn i { width: 15px; height: 15px; }

/* Picker grid */
.plan-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; }
.plan-pick-grid-muted { opacity: 0.5; }
.plan-pick-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 0; cursor: pointer; text-align: left; overflow: hidden; transition: all 0.15s; }
.plan-pick-card:hover { background: rgba(99,102,241,0.08); border-color: rgba(99,102,241,0.4); transform: translateY(-2px); }
.plan-pick-card.is-muted:hover { transform: none; opacity: 0.8; }
.plan-pick-thumb { width: 100%; height: 110px; background: #1e293b; display: flex; align-items: center; justify-content: center; }
.plan-pick-thumb img { width: 100%; height: 100%; object-fit: cover; }
.plan-pick-noimg i { color: #475569; width: 30px; height: 30px; }
.plan-pick-meta { padding: 9px 10px; display: flex; flex-direction: column; gap: 3px; }
.plan-pick-meta strong { color: #fff; font-size: 13px; font-weight: 600; }
.plan-pick-meta span { color: #94a3b8; font-size: 11.5px; line-height: 1.3; }
.plan-pick-tag { display: inline-block; margin-top: 4px; padding: 2px 8px; background: rgba(168,85,247,0.15); color: #c084fc; border-radius: 10px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; align-self: flex-start; }

/* === Planner: drag & drop === */
.plan-ad-mini[draggable="true"] { cursor: grab; }
.plan-ad-mini[draggable="true"]:active { cursor: grabbing; }
.plan-ad-mini.is-dragging { opacity: 0.4; transform: scale(0.95); }
.plan-cards-row { transition: background 0.15s, outline 0.15s; padding: 4px; border-radius: 8px; }
.plan-cards-row.is-drop-target { background: rgba(99,102,241,0.08); outline: 2px dashed rgba(99,102,241,0.5); outline-offset: -2px; }

/* === Planner: drop zone visible === */
.plan-drop-hint {
    flex: 1;
    min-width: 220px;
    min-height: 162px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(99,102,241,0.04);
    border: 2px dashed rgba(99,102,241,0.25);
    border-radius: 10px;
    color: #94a3b8;
    font-size: 13px;
    pointer-events: none;
    transition: all 0.2s;
}
.plan-drop-hint i { width: 22px; height: 22px; color: #a5b4fc; }
.plan-drop-hint span { color: #cbd5e1; font-weight: 500; }
.plan-drop-hint small { color: #64748b; font-size: 11px; }
.plan-cards-row.is-empty { min-height: 178px; }

/* Estado del adset cuando arrastramos algo encima */
.plan-adset { transition: all 0.15s; border-radius: 10px; }
.plan-adset.is-drop-target {
    background: rgba(99,102,241,0.08);
    outline: 2px dashed rgba(99,102,241,0.5);
    outline-offset: -1px;
}
.plan-adset.is-drop-target .plan-drop-hint {
    background: rgba(99,102,241,0.12);
    border-color: rgba(99,102,241,0.6);
    color: #fff;
}
.plan-adset.is-drop-target .plan-drop-hint span { color: #fff; }
.plan-adset.is-drop-target .plan-drop-hint i { color: #fff; }

/* === META PERMISSIONS WIDGET === */
.meta-perms-widget {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.meta-perms-widget.is-open { border-color: rgba(99,102,241,0.3); }
.meta-perms-toggle {
    width: 100%;
    background: transparent;
    border: none;
    padding: 12px 16px;
    color: #cbd5e1;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}
.meta-perms-toggle:hover { background: rgba(255,255,255,0.02); }
.meta-perms-toggle > i { width: 18px; height: 18px; color: #a5b4fc; }
.meta-perms-toggle .meta-perms-chevron { margin-left: auto; transition: transform 0.2s; width: 16px; height: 16px; }
.meta-perms-widget.is-open .meta-perms-chevron { transform: rotate(180deg); }
.meta-perms-badge {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11.5px;
    font-weight: 600;
    background: rgba(255,255,255,0.06);
    color: #94a3b8;
}
.meta-perms-badge.is-ok { background: rgba(34,197,94,0.15); color: #86efac; }
.meta-perms-badge.is-warn { background: rgba(251,191,36,0.15); color: #fbbf24; }
.meta-perms-badge.is-error { background: rgba(239,68,68,0.15); color: #fca5a5; }

.meta-perms-body { padding: 8px 16px 16px; border-top: 1px solid rgba(255,255,255,0.05); }
.meta-perms-loading { padding: 20px; text-align: center; color: #94a3b8; display: flex; gap: 8px; align-items: center; justify-content: center; }
.meta-perms-loading i { animation: spin 1s linear infinite; width: 16px; height: 16px; }
@keyframes spin { to { transform: rotate(360deg); } }

.meta-perms-section { margin-top: 14px; }
.meta-perms-section h4 { color: #94a3b8; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 10px; }

.meta-perm-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 10px;
    margin-bottom: 8px;
}
.meta-perm-item.is-ok { border-color: rgba(34,197,94,0.2); }
.meta-perm-item.is-warn { border-color: rgba(251,191,36,0.2); }
.meta-perm-item.is-error { border-color: rgba(239,68,68,0.25); background: rgba(239,68,68,0.04); }
.meta-perm-icon { width: 32px; height: 32px; flex: 0 0 32px; background: rgba(99,102,241,0.12); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #a5b4fc; }
.meta-perm-icon i { width: 16px; height: 16px; }
.meta-perm-text { flex: 1; min-width: 0; }
.meta-perm-text strong { color: #fff; font-size: 13.5px; display: flex; align-items: center; gap: 6px; }
.meta-perm-text p { margin: 4px 0 0; color: #94a3b8; font-size: 12.5px; line-height: 1.45; }
.meta-perm-tag { font-size: 10px; padding: 1px 7px; background: rgba(251,191,36,0.15); color: #fbbf24; border-radius: 8px; font-weight: 600; text-transform: uppercase; }
.meta-perm-missing { display: block; margin-top: 6px; color: #fca5a5; font-size: 11.5px; }
.meta-perm-missing code { background: rgba(239,68,68,0.1); padding: 1px 6px; border-radius: 4px; font-family: 'SF Mono', monospace; font-size: 11px; }
.meta-perm-status { flex: 0 0 auto; }
.meta-perm-status i { width: 18px; height: 18px; }
.meta-perm-item.is-ok .meta-perm-status i { color: #22c55e; }
.meta-perm-item.is-warn .meta-perm-status i { color: #fbbf24; }
.meta-perm-item.is-error .meta-perm-status i { color: #ef4444; }

.meta-perms-actions { margin-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.meta-perms-help { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; background: rgba(99,102,241,0.08); border-radius: 8px; color: #c7d2fe; font-size: 12.5px; line-height: 1.5; margin: 0; }
.meta-perms-help i { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; color: #a5b4fc; }
.meta-perms-reauth-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13.5px;
    align-self: flex-start;
    transition: transform 0.15s;
}
.meta-perms-reauth-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(99,102,241,0.3); }
.meta-perms-reauth-btn i { width: 15px; height: 15px; }
.meta-perms-refresh-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.15);
    color: #cbd5e1;
    padding: 8px 14px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    align-self: flex-start;
}
.meta-perms-refresh-btn:hover { background: rgba(255,255,255,0.04); color: #fff; }
.meta-perms-refresh-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.meta-perms-refresh-btn i { width: 14px; height: 14px; }

.meta-perms-error { display: flex; gap: 12px; padding: 14px; background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.2); border-radius: 10px; }
.meta-perms-error i { color: #ef4444; flex: 0 0 24px; width: 24px; height: 24px; }
.meta-perms-error strong { color: #fff; display: block; }
.meta-perms-error p { margin: 4px 0 0; color: #cbd5e1; font-size: 13px; }

.meta-perms-debug { margin-top: 14px; }
.meta-perms-debug summary { color: #64748b; font-size: 12px; cursor: pointer; padding: 6px 0; }
.meta-perms-debug pre { background: rgba(0,0,0,0.4); padding: 12px; border-radius: 6px; color: #94a3b8; font-size: 11px; line-height: 1.5; overflow-x: auto; max-height: 240px; }