/*
Theme Name: LocalDesign SaaS
Theme URI: https://localdesign.ai
Author: LocalDesign
Author URI: https://localdesign.ai
Description: Panel de administraci?n SaaS para LocalDesign - Gesti?n de sitios web para negocios locales
Version: 1.0.0
License: Proprietary
Text Domain: localdesign-saas
*/

:root {
    /* Primario ? Indigo/Violeta (solo CTAs) */
    --ld-primary: #6366F1;
    --ld-primary-dark: #4F46E5;
    --ld-primary-light: #818CF8;

    /* Accent = Primary */
    --ld-accent: #6366F1;
    --ld-accent-dark: #4F46E5;
    --ld-accent-light: #818CF8;
    --ld-accent-bg: rgba(99, 102, 241, 0.06);
    --ld-accent-50: #EEF2FF;
    --ld-accent-100: #E0E7FF;
    --ld-accent-200: #C7D2FE;
    
    /* Grises ? Vercel */
    --ld-gray-50: #FAFAFA;
    --ld-gray-100: #F5F5F5;
    --ld-gray-200: #EAEAEA;
    --ld-gray-300: #D4D4D4;
    --ld-gray-400: #999999;
    --ld-gray-500: #666666;
    --ld-gray-600: #444444;
    --ld-gray-700: #333333;
    --ld-gray-800: #222222;
    --ld-gray-900: #171717;
    --ld-gray-767676: #666;

    /* Estados — success (Emerald, familia única de confirmación) */
    --ld-success: #10B981;
    --ld-success-dark: #059669;
    --ld-success-darker: #047857;
    --ld-success-text: #065F46;
    --ld-success-surface: #F0FDF4;
    --ld-success-surface-alt: #ECFDF5;
    --ld-success-bg-soft: #D1FAE5;
    --ld-success-bg-pill: #DCFCE7;
    --ld-success-border: #BBF7D0;
    --ld-success-border-soft: #A7F3D0;
    --ld-success-bg: rgba(16, 185, 129, 0.08);
    --ld-success-shadow: rgba(16, 185, 129, 0.35);
    --ld-success-gradient: linear-gradient(135deg, var(--ld-success) 0%, var(--ld-success-dark) 100%);
    --ld-warning: #F59E0B;
    --ld-warning-bg: rgba(245, 158, 11, 0.08);
    --ld-error: #EF4444;
    --ld-error-bg: rgba(239, 68, 68, 0.08);
    --ld-info: #6366F1;
    --ld-info-bg: rgba(99, 102, 241, 0.08);
    
    /* Sidebar */
    --ld-sidebar-width: 260px;
    --ld-sidebar-bg: #FAFAFA;
    --ld-sidebar-text: #515151;
    --ld-sidebar-text-active: #171717;
    --ld-sidebar-hover: #F1F1F1;
    --ld-sidebar-border: #ededed;
    --ld-sidebar-active-bg: #EAEAEA;
    --ld-sidebar-active-clic-bg: #D4D4D4;

    /* Layout */
    --ld-chrome-bg: #FAFAFA;
    --ld-page-bg: #FAFAFA;
    --ld-content-bg: #FFFFFF;
    --ld-border: #dadada;
    --ld-app-header-height: 52px;
    --ld-mobile-header-height: var(--ld-app-header-height);
    --ld-mobile-actionbar-height: 64px;
    --ld-mobile-safe-top: env(safe-area-inset-top, 0px);
    --ld-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
    --ld-mobile-sheet-max-height: min(85dvh, calc(100dvh - var(--ld-mobile-safe-top) - var(--ld-mobile-safe-bottom)));

    /* Layer scale */
    --ld-z-base: 1;
    --ld-z-sticky: 40;
    --ld-z-dropdown: 300;
    --ld-z-sidebar-overlay: 420;
    --ld-z-sidebar: 430;
    --ld-z-actionbar: 500;
    --ld-z-modal: 9000;
    --ld-z-command: 9500;
    --ld-z-chat: 9400;
    --ld-z-tour: 9800;
    --ld-z-critical: 9900;
    
    /* Tipografia ? Inter */
    --ld-font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ld-font-size-micro: 0.6875rem;
    --ld-font-size-2xs: 0.75rem;
    --ld-font-size-xs: 0.8375rem;
    --ld-font-size-sm: 0.975rem;
    --ld-font-size-base: 1rem;
    --ld-font-size-md: 1.05rem;
    --ld-font-size-lg: 1.175rem;
    --ld-font-size-xl: 1.3rem;
    --ld-font-size-2xl: 1.55rem;
    --ld-font-size-3xl: 1.85rem;
    --ld-font-size-display-sm: 2rem;
    --ld-font-size-display-md: 2.5rem;
    --ld-font-size-display-lg: 3rem;
    --ld-font-size-control: var(--ld-font-size-sm);
    --ld-font-size-muted: var(--ld-font-size-xs);
    --ld-font-size-modal-title: var(--ld-font-size-xl);
    
    /* Espaciado */
    --ld-spacing-1: 0.25rem;
    --ld-spacing-2: 0.5rem;
    --ld-spacing-3: 0.75rem;
    --ld-spacing-4: 1rem;
    --ld-spacing-5: 1.25rem;
    --ld-spacing-6: 1.5rem;
    --ld-spacing-8: 2rem;
    --ld-spacing-10: 2.5rem;
    --ld-spacing-12: 3rem;
    
    /* Radios ? sutiles, Vercel */
    --ld-radius-sm: 6px;
    --ld-radius-md: 8px;
    --ld-radius-lg: 8px;
    --ld-radius-xl: 12px;
    --ld-radius-full: 9999px;
    
    /* Sombras ? ninguna */
    --ld-shadow-sm: none;
    --ld-shadow-md: none;
    --ld-shadow-lg: none;
    --ld-shadow-card: none;

    /* Modal overlays */
    --ld-overlay-blur: 6px;
}

/* Reset b?sico */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--ld-font-family);
    font-size: var(--ld-font-size-base);
    line-height: 1.5;
    color: var(--ld-gray-900);
    background-color: var(--ld-page-bg);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    max-width: 100vw;
}

body.ld-scroll-locked {
    overflow: hidden;
    touch-action: none;
}

body.ld-saas-font-large {
    --ld-font-size-micro: 0.7125rem;
    --ld-font-size-2xs: 0.7875rem;
    --ld-font-size-xs: 0.8875rem;
    --ld-font-size-sm: 1.025rem;
    --ld-font-size-base: 1.075rem;
    --ld-font-size-md: 1.125rem;
    --ld-font-size-lg: 1.25rem;
    --ld-font-size-xl: 1.4rem;
    --ld-font-size-2xl: 1.675rem;
    --ld-font-size-3xl: 1.975rem;
    --ld-font-size-display-sm: 2.075rem;
    --ld-font-size-display-md: 2.6rem;
    --ld-font-size-display-lg: 3.1rem;
    --ld-font-size-control: 1.025rem;
    --ld-font-size-muted: 0.8875rem;
    --ld-font-size-modal-title: 1.4rem;
}

body.ld-saas-font-xlarge {
    --ld-font-size-micro: 0.7375rem;
    --ld-font-size-2xs: 0.825rem;
    --ld-font-size-xs: 0.95rem;
    --ld-font-size-sm: 1.0875rem;
    --ld-font-size-base: 1.15rem;
    --ld-font-size-md: 1.2rem;
    --ld-font-size-lg: 1.3375rem;
    --ld-font-size-xl: 1.5rem;
    --ld-font-size-2xl: 1.8rem;
    --ld-font-size-3xl: 2.1rem;
    --ld-font-size-display-sm: 2.15rem;
    --ld-font-size-display-md: 2.7rem;
    --ld-font-size-display-lg: 3.2rem;
    --ld-font-size-control: 1.0875rem;
    --ld-font-size-muted: 0.95rem;
    --ld-font-size-modal-title: 1.5rem;
}

@media (min-width: 1600px) {
    body.ld-saas-font-large {
        --ld-font-size-micro: 0.725rem;
        --ld-font-size-2xs: 0.8rem;
        --ld-font-size-xs: 0.9125rem;
        --ld-font-size-sm: 1.05rem;
        --ld-font-size-base: 1.1rem;
        --ld-font-size-md: 1.15rem;
        --ld-font-size-lg: 1.2875rem;
        --ld-font-size-xl: 1.4375rem;
        --ld-font-size-2xl: 1.725rem;
        --ld-font-size-3xl: 2.025rem;
        --ld-font-size-display-sm: 2.1rem;
        --ld-font-size-display-md: 2.625rem;
        --ld-font-size-display-lg: 3.15rem;
        --ld-font-size-control: 1.05rem;
        --ld-font-size-muted: 0.9125rem;
        --ld-font-size-modal-title: 1.4375rem;
    }

    body.ld-saas-font-xlarge {
        --ld-font-size-micro: 0.75rem;
        --ld-font-size-2xs: 0.8375rem;
        --ld-font-size-xs: 0.975rem;
        --ld-font-size-sm: 1.125rem;
        --ld-font-size-base: 1.1875rem;
        --ld-font-size-md: 1.2375rem;
        --ld-font-size-lg: 1.375rem;
        --ld-font-size-xl: 1.55rem;
        --ld-font-size-2xl: 1.85rem;
        --ld-font-size-3xl: 2.15rem;
        --ld-font-size-display-sm: 2.2rem;
        --ld-font-size-display-md: 2.75rem;
        --ld-font-size-display-lg: 3.25rem;
        --ld-font-size-control: 1.125rem;
        --ld-font-size-muted: 0.975rem;
        --ld-font-size-modal-title: 1.55rem;
    }
}

.ld-app {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

/* =====================================================
   SIDEBAR
   ===================================================== */
.ld-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--ld-sidebar-width);
    background-color: var(--ld-sidebar-bg);
    border-right: 1px solid  #ececec;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease;
    z-index: var(--ld-z-sidebar);
}

.ld-sidebar-logo {
    padding: 1.75rem 1.5rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ld-sidebar-logo a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--ld-gray-900);
    font-weight: 700;
    font-size: var(--ld-font-size-lg);
}

.ld-sidebar-close {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    width: 32px;
    height: 32px;
    cursor: pointer;
    color: var(--ld-gray-500);
    padding: 0;
    flex-shrink: 0;
}
.ld-sidebar-close svg {
    width: 18px !important;
    height: 18px !important;
}
.ld-sidebar-close:hover {
    background: var(--ld-gray-100);
    color: var(--ld-gray-700);
}

.ld-sidebar-logo img,
.ld-sidebar-logo svg,
.ld-brand-logo-img {
    max-width: 140px;
    width: 100%;
    height: auto;
    display: block;
}

.ld-brand-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.ld-brand-logo--auth {
    justify-content: center;
}

.ld-brand-logo--auth .ld-brand-logo-img {
    max-width: 160px;
}

.ld-brand-logo--onboarding .ld-brand-logo-img {
    max-width: 120px;
}

.ld-brand-logo--nav .ld-brand-logo-img {
    max-width: 140px;
}

.ld-sidebar-nav-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-top: 1.5rem;
}
.ld-sidebar-nav-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 10px;
    height: 2rem;
    background: linear-gradient(to bottom, transparent 0%, var(--ld-sidebar-bg) 88%);
    pointer-events: none;
    z-index: 2;
}

.ld-sidebar-nav {
    flex: 1;
    min-height: 0;
    padding: 0 0.75rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #ababab transparent;
    padding-bottom: 1rem;
    margin-top: 0;
}

.ld-sidebar-nav:hover {
    scrollbar-color: #999999
 transparent;
}

.ld-sidebar-nav::-webkit-scrollbar {
    width: 4px;
}

.ld-sidebar-nav::-webkit-scrollbar-track {
    background: transparent;
}

.ld-sidebar-nav::-webkit-scrollbar-thumb {
    background: var(--ld-gray-200);
    border-radius: 9999px;
    transition: background 0.2s;
}

.ld-sidebar-nav:hover::-webkit-scrollbar-thumb {
    background: var(--ld-gray-300);
}

.ld-nav-section {
    margin-bottom: 0.5rem;
}

.ld-nav-section-title {
    font-size: var(--ld-font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ld-gray-400);
    padding: 1rem 1rem 0.5rem;
    margin: 0;

}
.ld-nav-section:first-of-type .ld-nav-section-title {
    padding-top: 0 !important;
}



.ld-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.435rem 0.75rem;
    margin-bottom: 1px;
    color: var(--ld-sidebar-text);
    text-decoration: none;
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    border-radius: var(--ld-radius-sm);
    transition: all 0.15s ease;
}

.ld-nav-item:hover {
    background-color: var(--ld-sidebar-hover);
    color: var(--ld-gray-800);
}

.ld-nav-item:active {
    background-color: var(--ld-sidebar-active-clic-bg);
    color: var(--ld-sidebar-text-active);
}

.ld-nav-item.active {
    background-color: var(--ld-sidebar-active-bg);
    color: var(--ld-sidebar-text-active);
}

.ld-nav-item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    stroke: currentColor;
}

.ld-nav-item svg.ld-nav-hidden-icon {
        stroke: #222;

}
.ld-nav-item:hover svg,
.ld-nav-item.active svg {
    opacity: 1;
}

.ld-nav-item-locked {
    opacity: 0.6;
}

.ld-nav-item-locked:hover {
    opacity: 0.8;
}

.ld-nav-badge-pro {
    margin-left: auto;
    padding: 2px 6px;
    font-size: var(--ld-font-size-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    background: linear-gradient(135deg, var(--ld-primary), #8b5cf6);
    color: white;
    border-radius: 4px;
}
.ld-nav-badge-count {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ld-font-size-micro);
    font-weight: 600;
    line-height: 1;
    background: #ef4444;
    color: white;
    border-radius: 10px;
}

/* User menu en sidebar */
.ld-sidebar-user {
    padding-top: 0.25rem;
    padding-bottom: 0.5rem;
    margin: auto 0 0.25rem;
    background: var(--ld-sidebar-bg);
    overflow: visible;
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    border-top: 1px solid #ececec;
}
.ld-sidebar-user .ld-user-dropdown-wrap--sidebar {
    box-sizing: border-box;
    width: 100%;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.ld-user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.375rem;
    border-radius: var(--ld-radius-sm);
    cursor: pointer;
    transition: background-color 0.12s ease;
}

.ld-user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    border: none;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    padding: 0.5rem;
    border-radius: var(--ld-radius-sm);
    cursor: pointer;
    transition: background-color 0.12s ease;
}
.ld-user-menu-trigger:hover {
    background-color: var(--ld-sidebar-active-bg);
    color: var(--ld-sidebar-text-active);
}
.ld-user-menu-chevron {
    flex-shrink: 0;
    color: var(--ld-gray-400);
    margin-left: auto;
}
.ld-user-dropdown-wrap--sidebar {
    position: relative;
    width: 100%;
}
.ld-user-dropdown-wrap--sidebar .ld-user-dropdown.ld-user-dropdown--up {
    left: 0;
    right: 0;
    width: auto;
    min-width: 0;
    margin: 0 1rem;
}
.ld-view-site-btn {
    text-decoration: none;
    white-space: nowrap;
}
.ld-header-site-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}
.ld-publish-site-btn {
    text-decoration: none;
    white-space: nowrap;
}

.ld-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--ld-radius-full);
    background-color: var(--ld-gray-200);
    color: var(--ld-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--ld-font-size-xs);
}

.ld-user-details {
    flex: 1;
    min-width: 0;
}

.ld-user-name {
    color: var(--ld-gray-900);
    font-weight: 600;
    font-size: var(--ld-font-size-sm);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-user-email {
    color: var(--ld-gray-400);
    font-size: var(--ld-font-size-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =====================================================
   MAIN CONTENT
   ===================================================== */
.ld-main {
    flex: 1;
    margin-left: var(--ld-sidebar-width);
    min-height: 100vh;
    background-color: var(--ld-page-bg);
    position: relative;
    z-index: auto;
    transition: margin-left 0.25s ease;
}

/* Header global - OCULTO por defecto, cada p?gina tiene el suyo */
.ld-header {
    display: none;
}

.ld-content {
    padding: 24px 32px;
    max-width: 1200px;
    border-radius: var(--ld-radius-md);
    margin: 24px;
    overflow-x: hidden;
}

/* =====================================================
   PAGE HEADER
   ===================================================== */
.ld-page-header {
    margin-bottom: var(--ld-spacing-8);
}

.ld-page-header h1 {
    font-size: var(--ld-font-size-2xl);
    font-weight: 700;
    color: var(--ld-gray-900);
    margin: 0 0 0.25rem 0;
}

.ld-page-header p {
    font-size: var(--ld-font-size-base);
    color: var(--ld-gray-500);
    margin: 0;
}

/* =====================================================
   CARDS ? Vercel style, 1px border
   ===================================================== */
.ld-card {
    background-color: var(--ld-content-bg);
    border-radius: var(--ld-radius-md);
    border: 1px solid var(--ld-border);
}

.ld-card-header {
    padding: var(--ld-spacing-6) var(--ld-spacing-6) var(--ld-spacing-4);
}

.ld-card-title {
    font-size: var(--ld-font-size-lg);
    font-weight: 700;
    color: var(--ld-gray-900);
    margin: 0;
}

.ld-card-body {
    padding: var(--ld-spacing-5);
}

.ld-card-header + .ld-card-body {
    padding-top: 0;
}

/* Stats cards */
.ld-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--ld-spacing-4);
    margin-bottom: var(--ld-spacing-6);
}

.ld-stat-card {
    background-color: var(--ld-content-bg);
    border-radius: var(--ld-radius-md);
    padding: var(--ld-spacing-5);
    display: flex;
    align-items: center;
    gap: var(--ld-spacing-4);
    border: 1px solid var(--ld-border);
}

.ld-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ld-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ld-stat-icon.primary {
    background-color: var(--ld-accent-50);
    color: var(--ld-accent);
}

.ld-stat-icon.success {
    background-color: var(--ld-success-bg);
    color: var(--ld-success);
}

.ld-stat-icon.warning {
    background-color: var(--ld-warning-bg);
    color: var(--ld-warning);
}

.ld-stat-icon.accent {
    background-color: var(--ld-accent-bg);
    color: var(--ld-accent);
}

.ld-stat-icon svg {
    width: 20px;
    height: 20px;
}

.ld-stat-content {
    flex: 1;
}

.ld-stat-label {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-600);
    margin-bottom: 0.125rem;
}

.ld-stat-value {
    font-size: var(--ld-font-size-2xl);
    font-weight: 700;
    color: var(--ld-gray-900);
}

/* -- Site cards grid ---------------------------------------------------- */
.ld-sites-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--ld-spacing-5);
}

.ld-site-card {
    background: var(--ld-content-bg);
    border-radius: var(--ld-radius-md);
    overflow: hidden;
    transition: border-color 0.15s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ld-border);
}

.ld-site-card:hover {
    border-color: var(--ld-gray-300);
}

/* Thumbnail */
.ld-site-thumb {
    height: 140px;
    background-color: var(--ld-gray-100);
    background-size: cover;
    background-position: center top;
    position: relative;
    flex-shrink: 0;
}

.ld-site-thumb-initials {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ld-gray-200);
    color: var(--ld-gray-500);
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* Status badge */
.ld-site-badge {
    position: absolute;
    top: 0.625rem;
    right: 0.625rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border-radius: var(--ld-radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.ld-site-badge--active {
    background: rgba(16, 185, 129, 0.15);
    color: var(--ld-success-dark);
}

.ld-site-badge--preview {
    background: rgba(99, 102, 241, 0.15);
    color: #4f46e5;
}

.ld-site-badge--pending,
.ld-site-badge--generating {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.ld-site-badge--choosing {
    background: rgba(99, 102, 241, 0.12);
    color: var(--ld-accent);
}

.ld-site-badge--dns-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}

.ld-site-badge--suspended,
.ld-site-badge--error {
    background: rgba(239, 68, 68, 0.12);
    color: #dc2626;
}

/* Spinning icon for building state */
.ld-spin-icon {
    width: 12px;
    height: 12px;
    animation: ld-spin 1s linear infinite;
}

@keyframes ld-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Body */
.ld-site-body {
    padding: var(--ld-spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--ld-spacing-3);
    flex: 1;
}

.ld-site-meta {
    flex: 1;
}

.ld-site-name {
    font-weight: 600;
    font-size: var(--ld-font-size-base);
    color: var(--ld-gray-900);
    margin-bottom: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-site-domain {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-400);
}

.ld-site-domain a {
    color: var(--ld-gray-400);
    text-decoration: none;
    transition: color 0.12s;
}

.ld-site-domain a:hover {
    color: var(--ld-accent);
}

/* Actions row */
.ld-site-actions {
    display: flex;
    gap: var(--ld-spacing-2);
    align-items: center;
}

/* -- Completion box ---------------------------------------------------- */
.ld-completion {
    padding-top: var(--ld-spacing-3);
}

.ld-completion-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.ld-completion-label {
    font-size: var(--ld-font-size-xs);
    font-weight: 600;
    color: var(--ld-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ld-completion-pct {
    font-size: var(--ld-font-size-xs);
    font-weight: 700;
    color: var(--ld-accent);
}

.ld-completion-track {
    height: 4px;
    background: var(--ld-gray-100);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: var(--ld-spacing-3);
}

.ld-completion-fill {
    height: 100%;
    background: var(--ld-accent);
    border-radius: 99px;
    transition: width 0.5s ease;
}

.ld-completion-tasks {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ld-ctask {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.5rem;
    border-radius: var(--ld-radius-md);
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-600);
    text-decoration: none;
    transition: background 0.1s;
}

.ld-ctask:hover {
    background: var(--ld-gray-50);
}

.ld-ctask.done {
    color: var(--ld-gray-400);
}

.ld-ctask-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--ld-gray-300);
}

.ld-ctask-icon.done {
    color: var(--ld-success);
}

.ld-ctask-label {
    flex: 1;
    font-weight: 500;
}

.ld-ctask-detail {
    color: var(--ld-gray-400);
    font-size: 0.68rem;
}

/* =====================================================
   BUTTONS ? Vercel style
   ===================================================== */
.ld-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    border-radius: var(--ld-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

/* Primary = Violeta solido (CTAs) */
.ld-btn-primary {
    background-color: var(--ld-accent);
    color: white;
    border-color: var(--ld-accent);
}

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

/* Secondary = Blanco con borde gris */
.ld-btn-secondary {
    background-color: white;
    color: var(--ld-gray-900);
    border-color: var(--ld-border);
}

.ld-btn-secondary:hover {
    background-color: var(--ld-gray-50);
    border-color: var(--ld-gray-300);
}

/* Ghost = Transparente */
.ld-btn-ghost {
    background-color: transparent;
    color: var(--ld-gray-600);
}

.ld-btn-ghost:hover {
    background-color: var(--ld-gray-100);
    color: var(--ld-gray-900);
}

/* Dark = Negro solido */
.ld-btn-dark {
    background-color: var(--ld-gray-900);
    color: white;
    border-radius: var(--ld-radius-sm);
}

.ld-btn-dark:hover {
    background-color: var(--ld-gray-800);
}

.ld-btn-lg {
    padding: 0.625rem 1.5rem;
    font-size: var(--ld-font-size-base);
    border-radius: var(--ld-radius-sm);
}

.ld-btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: var(--ld-font-size-xs);
    border-radius: var(--ld-radius-sm);
}

.ld-btn-block {
    width: 100%;
}

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

.ld-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* =====================================================
   FORMS ? Vercel style
   ===================================================== */
.ld-form-group {
    margin-bottom: var(--ld-spacing-5);
}

.ld-form-label {
    display: block;
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    color: var(--ld-gray-900);
    margin-bottom: 0.375rem;
}

.ld-form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--ld-font-size-control);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    background-color: white;
    color: var(--ld-gray-900);
    transition: border-color 0.15s ease;
}

.ld-form-input:hover {
    border-color: var(--ld-gray-300);
}

.ld-form-input:focus,
select.ld-form-input:focus {
    outline: none;
    border-color: var(--ld-gray-400);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.ld-form-input::placeholder {
    color: var(--ld-gray-400);
}

.ld-form-textarea {
    min-height: 100px;
    resize: vertical;
}

.ld-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23999' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    padding-right: 2.5rem;
    border-radius: var(--ld-radius-sm);
}

.ld-form-hint {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-400);
    margin-top: 0.375rem;
}

.ld-form-error {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-error);
    margin-top: 0.25rem;
}

/* =====================================================
   WIZARD ? moderno, flat
   ===================================================== */
.ld-wizard {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--ld-spacing-8) var(--ld-spacing-4);
}

.ld-wizard-steps {
    display: flex;
    justify-content: center;
    gap: var(--ld-spacing-6);
    margin-bottom: var(--ld-spacing-8);
    position: relative;
}

.ld-wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.ld-wizard-step-number {
    width: 34px;
    height: 34px;
    border-radius: var(--ld-radius-full);
    background-color: var(--ld-gray-100);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--ld-font-size-sm);
    font-weight: 700;
    color: var(--ld-gray-400);
    transition: all 0.2s ease;
}

.ld-wizard-step.active .ld-wizard-step-number {
    background-color: var(--ld-accent);
    color: white;
}

.ld-wizard-step.completed .ld-wizard-step-number {
    background-color: var(--ld-success);
    color: white;
}

.ld-wizard-step-label {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-400);
    font-weight: 500;
}

.ld-wizard-step.active .ld-wizard-step-label {
    color: var(--ld-accent);
    font-weight: 600;
}

.ld-wizard-step.completed .ld-wizard-step-label {
    color: var(--ld-gray-600);
}

.ld-wizard-content {
    background-color: var(--ld-content-bg);
    border-radius: var(--ld-radius-xl);
    padding: var(--ld-spacing-10);
}

.ld-wizard-panel {
    animation: fadeIn 0.2s ease;
}

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

.ld-wizard-title {
    font-size: var(--ld-font-size-xl);
    font-weight: 700;
    color: var(--ld-gray-900);
    margin: 0 0 0.375rem 0;
}

.ld-wizard-description {
    color: var(--ld-gray-500);
    margin: 0 0 var(--ld-spacing-6) 0;
    font-size: var(--ld-font-size-base);
}

.ld-wizard-actions {
    display: flex;
    justify-content: space-between;
    margin-top: var(--ld-spacing-10);
    padding-top: 0;
}

/* =====================================================
   CONTACT PAGE
   ===================================================== */
.ld-contact-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

.ld-content:has(.ld-contact-page) {
    background: transparent;
    border: none;
    padding: 24px;
}

.ld-contact-header {
    margin-bottom: var(--ld-spacing-8);
}

.ld-contact-header h1 {
    font-size: var(--ld-font-size-2xl);
    font-weight: 600;
    color: var(--ld-gray-900);
    margin: 0 0 0.375rem 0;
}

.ld-contact-header p {
    font-size: var(--ld-font-size-base);
    color: var(--ld-gray-600);
    margin: 0;
}

.ld-contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ld-spacing-6);
}

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

.ld-contact-form-card {
    background: white;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    padding: var(--ld-spacing-6);
}

.ld-contact-form-card h2 {
    font-size: var(--ld-font-size-lg);
    font-weight: 600;
    color: var(--ld-gray-900);
    margin: 0 0 0.25rem 0;
}

.ld-contact-form-card > p {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-767676);
    margin: 0 0 var(--ld-spacing-5) 0;
}

.ld-contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--ld-spacing-4);
}

.ld-contact-info-card {
    background: white;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    padding: var(--ld-spacing-5);
}

.ld-contact-chat-card .ld-btn-secondary {
    margin-top: var(--ld-spacing-2);
}

.ld-contact-info-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ld-radius-md);
    background-color: rgba(99,102,241,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--ld-spacing-3);
    color: #6366F1;
}

.ld-contact-info-icon svg {
    width: 20px;
    height: 20px;
}

.ld-contact-info-card h3 {
    font-size: var(--ld-font-size-base);
    font-weight: 600;
    color: var(--ld-gray-900);
    margin: 0 0 0.25rem 0;
}

.ld-contact-info-card p {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-767676);
    margin: 0 0 0.5rem 0;
}

.ld-contact-info-card a {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-accent);
    text-decoration: none;
}

.ld-contact-info-card a:hover {
    text-decoration: underline;
}

.ld-contact-success {
    text-align: center;
    padding: var(--ld-spacing-8);
}

.ld-success-icon {
    font-size: 3rem;
    margin-bottom: var(--ld-spacing-4);
}

/* =====================================================
   SIDEBAR EXTRAS
   ===================================================== */
.ld-sidebar-site-info {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ld-border);
    margin-bottom: 0.25rem;
}
.ld-sidebar-site-name {
    font-weight: 600;
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ld-sidebar-site-domain {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-400);
    margin-top: 0.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ld-site-switcher-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    color: var(--ld-gray-900);
    background: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23999' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem;
    padding-right: 2rem;
}
.ld-site-selector {
    padding: 0.75rem;
}

/* =====================================================
   DASHBOARD ? Site-first
   ===================================================== */
.ld-dashboard {
    padding: 0;
    max-width: none;
}

/* Empty state */
.ld-dash-empty {
    text-align: center;
    padding: 6rem 2rem 4rem;
}
.ld-dash-empty-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ld-accent-50);
    border-radius: var(--ld-radius-xl);
}
.ld-dash-empty-icon svg {
    width: 36px;
    height: 36px;
    color: var(--ld-accent);
}
.ld-dash-empty-title {
    font-size: var(--ld-font-size-3xl);
    font-weight: 700;
    color: var(--ld-gray-900);
    margin: 0 0 0.5rem;
}
.ld-dash-empty-text {
    font-size: var(--ld-font-size-base);
    color: var(--ld-gray-500);
    margin: 0 0 2rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Multi-site selector bar */
.ld-dash-site-selector {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: var(--ld-spacing-6);
    padding: 0.75rem 1rem;
    background: white;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
}
.ld-dash-selector-label {
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    color: var(--ld-gray-500);
    flex-shrink: 0;
}
.ld-dash-selector-select {
    flex: 1;
    padding: 0.375rem 2rem 0.375rem 0.625rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    font-size: var(--ld-font-size-sm);
    font-weight: 600;
    color: var(--ld-gray-900);
    background: white;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23999' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25rem;
}

/* Preview notice banner */
.ld-dash-preview-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    background: var(--ld-content-bg);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-lg);
    margin-bottom: var(--ld-spacing-5);
}
.ld-dash-preview-notice-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.ld-dash-preview-notice-title {
    display: block;
    font-size: var(--ld-font-size-sm);
    font-weight: 600;
    color: var(--ld-gray-900);
    margin-bottom: 0.125rem;
}
.ld-dash-preview-notice-desc {
    display: block;
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-500);
}
@media (max-width: 600px) {
    .ld-dash-preview-notice {
        flex-direction: column;
        align-items: flex-start;
    }
    .ld-dash-preview-notice > .ld-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Dashboard notices (unified horizontal cards) ─────────────── */
.ld-dash-notice {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--ld-radius-md);
    margin-bottom: var(--ld-spacing-5);
}
.ld-dash-notice-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--ld-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ld-dash-notice-icon svg {
    width: 22px;
    height: 22px;
}
.ld-dash-notice-body {
    flex: 1;
    min-width: 0;
}
.ld-dash-notice-title {
    display: block;
    font-size: var(--ld-font-size-control);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 0.25rem;
}
.ld-dash-notice-text {
    font-size: var(--ld-font-size-muted);
    line-height: 1.55;
    margin: 0;
}
.ld-dash-notice-links {
    margin-top: 0.5rem;
    font-size: var(--ld-font-size-xs);
}
.ld-dash-notice-links a {
    text-decoration: none;
    font-weight: 500;
}
.ld-dash-notice-links a:hover { text-decoration: underline; }
.ld-dash-notice-sep {
    margin: 0 0.375rem;
    opacity: 0.4;
}
.ld-dash-notice-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
    font-size: 0.8125rem;
}
.ld-dash-notice-meta a {
    font-weight: 600;
    text-decoration: none;
}
.ld-dash-notice-meta a:hover { text-decoration: underline; }
.ld-dash-notice-spinner {
    width: 13px;
    height: 13px;
    animation: ld-notice-spin 1.2s linear infinite;
    flex-shrink: 0;
}
@keyframes ld-notice-spin { to { transform: rotate(360deg); } }

/* -- Accent (violet): publish CTA for preview sites */
.ld-dash-notice--accent {
    background: var(--ld-accent-50);
    border: 1px solid var(--ld-accent-200);
}
.ld-dash-notice--accent .ld-dash-notice-icon {
    background: var(--ld-accent);
}
.ld-dash-notice--accent .ld-dash-notice-icon svg { color: #fff; }
.ld-dash-notice--accent .ld-dash-notice-title { color: var(--ld-gray-900); }
.ld-dash-notice--accent .ld-dash-notice-text { color: var(--ld-gray-600); }
.ld-dash-notice--accent .ld-dash-notice-links a { color: var(--ld-accent); }
.ld-dash-notice--accent .ld-dash-notice-sep { color: var(--ld-gray-400); }

/* -- Amber: DNS pending */
.ld-dash-notice--amber {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.22);
}
.ld-dash-notice--amber .ld-dash-notice-icon {
    background: #D97706;
}
.ld-dash-notice--amber .ld-dash-notice-icon svg { color: #fff; }
.ld-dash-notice-icon--pulse svg {
    animation: ld-notice-pulse 2.4s ease-in-out infinite;
}
@keyframes ld-notice-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
.ld-dash-notice--amber .ld-dash-notice-title { color: #92400E; }
.ld-dash-notice--amber .ld-dash-notice-text { color: #78350F; }
.ld-dash-notice--amber .ld-dash-notice-meta { color: #92400E; }
.ld-dash-notice--amber .ld-dash-notice-meta a { color: #92400E; }
.ld-dash-notice--amber .ld-dash-notice-sep { color: #D97706; }

/* -- Blue: deploying */
.ld-dash-notice--blue {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
}
.ld-dash-notice--blue .ld-dash-notice-icon {
    background: #2563EB;
}
.ld-dash-notice--blue .ld-dash-notice-icon svg { color: #fff; }
.ld-dash-notice--blue .ld-dash-notice-title { color: #1E40AF; }
.ld-dash-notice--blue .ld-dash-notice-text { color: #1E3A5F; }

/* -- Red: error */
.ld-dash-notice--red {
    background: #FEF2F2;
    border: 1px solid #FECACA;
}
.ld-dash-notice--red .ld-dash-notice-icon {
    background: #DC2626;
}
.ld-dash-notice--red .ld-dash-notice-icon svg { color: #fff; }
.ld-dash-notice--red .ld-dash-notice-title { color: #991B1B; }
.ld-dash-notice--red .ld-dash-notice-text { color: #7F1D1D; }

@media (max-width: 640px) {
    .ld-dash-notice { flex-wrap: wrap; }
    .ld-dash-notice .ld-btn { width: 100%; justify-content: center; }
}

/* Domain link disabled state (DNS pending) */
.ld-dash-hero-domain--disabled {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--ld-gray-400);
    cursor: default;
    pointer-events: none;
    text-decoration: none;
}
.ld-dash-hero-meta-sep {
    color: var(--ld-gray-300);
    user-select: none;
}
.ld-dash-dns-info-link {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-400);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}
.ld-dash-dns-info-link:hover {
    color: var(--ld-gray-600);
}
.ld-dash-dns-check {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-400);
    white-space: nowrap;
}
.ld-dns-pending-meta,
.ld-dns-phase {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.ld-dash-dns-tip {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-500);
}

/* Publish hero card (preview state — CTA to publish) */
.ld-dash-publish-hero {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    border-radius: var(--ld-radius-lg);
    padding: 2.5rem 2rem;
    color: #fff;
    text-align: center;
    margin-bottom: var(--ld-spacing-6);
}
.ld-dash-publish-hero-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}
.ld-dash-publish-hero-icon svg {
    display: block;
    width: 44px;
    height: 44px;
    opacity: 0.9;
}
.ld-dash-publish-hero-title {
    font-size: var(--ld-font-size-2xl);
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.ld-dash-publish-hero-text {
    font-size: var(--ld-font-size-md);
    opacity: 0.9;
    margin: 0 0 1.5rem;
    line-height: 1.5;
}
.ld-dash-publish-hero-cta {
    display: inline-block;
    background: #fff;
    color: #4F46E5;
    font-weight: 600;
    font-size: var(--ld-font-size-md);
    padding: 0.875rem 2.5rem;
    border-radius: var(--ld-radius-md);
    text-decoration: none;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}
.ld-dash-publish-hero-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}
.ld-dash-publish-hero-links {
    margin-top: 1.25rem;
}
.ld-dash-publish-hero-links a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: var(--ld-font-size-control);
    transition: color 0.15s;
    text-decoration: underline;
}


.ld-dash-publish-hero-links a:hover { text-decoration: none;

 }
.ld-dash-publish-hero-sep {
    margin: 0 0.5rem;
    color: rgba(255,255,255,0.4);
}
@media (max-width: 480px) {
    .ld-dash-publish-hero { padding: 2rem 1.25rem; }
    .ld-dash-publish-hero-title { font-size: var(--ld-font-size-xl); }
    .ld-dash-publish-hero-cta { width: 100%; text-align: center; }
}

/* Hero block */
.ld-dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.75rem 2rem;
    background: white;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    margin-bottom: var(--ld-spacing-5);
}
.ld-dash-hero-title {
    font-size: var(--ld-font-size-2xl);
    font-weight: 700;
    color: var(--ld-gray-900);
    margin: 0 0 0.375rem;
}
.ld-dash-hero-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.ld-dash-hero-domain {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-400);
}
.ld-dash-hero-domain--link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-decoration: none;
    transition: color 0.15s;
}
.ld-dash-hero-domain--link:hover {
    color: var(--ld-gray-600);
}
.ld-dash-hero-domain--link svg {
    transition: opacity 0.15s;
}
.ld-dash-hero-domain--link:hover svg {
    opacity: 1 !important;
}
.ld-dash-status {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--ld-radius-full);
    font-size: 0.7rem;
    font-weight: 600;
}
.ld-dash-status--active {
    background: rgba(16,185,129,0.12);
    color: var(--ld-success-dark);
}
.ld-dash-status--dns-pending {
    background: rgba(245,158,11,0.12);
    color: #D97706;
}
.ld-dash-status--preview {
    background: rgba(99,102,241,0.12);
    color: #4f46e5;
}
.ld-dash-status--pending,
.ld-dash-status--generating {
    background: rgba(245,158,11,0.12);
    color: #b45309;
}
.ld-dash-status--choosing {
    background: rgba(99,102,241,0.12);
    color: var(--ld-accent);
}
.ld-dash-status--error {
    background: rgba(239,68,68,0.12);
    color: #DC2626;
}
.ld-dash-status--deploying {
    background: rgba(37,99,235,0.12);
    color: #2563EB;
}
.ld-dash-domain-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--ld-radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: 0.5rem;
}
.ld-dash-domain-badge--pending {
    background: rgba(245,158,11,0.12);
    color: #b45309;
}
.ld-dash-domain-badge--error {
    background: rgba(239,68,68,0.12);
    color: #DC2626;
}
.ld-dash-hero-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* Publish banner */
.ld-dash-publish-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--ld-gray-900);
    color: white;
    border-radius: var(--ld-radius-md);
    margin-bottom: var(--ld-spacing-5);
    font-size: var(--ld-font-size-sm);
}
.ld-dash-publish-text strong { color: white; }

/* Completion block */
.ld-dash-completion {
    margin-bottom: 2.5rem;
    margin-top: 2.5rem;
}
.ld-dash-completion-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.ld-dash-completion-title {
    font-size: var(--ld-font-size-lg);
    font-weight: 700;
    color: var(--ld-gray-900);
    margin: 0 0 0.25rem;
}
.ld-dash-completion-desc {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-500);
    margin: 0;
}
.ld-dash-completion-pct {
    text-align: right;
    flex-shrink: 0;
}
.ld-dash-completion-number {
    display: block;
    font-size: var(--ld-font-size-2xl);
    font-weight: 700;
    color: var(--ld-accent);
    line-height: 1;
}
.ld-dash-completion-label {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-400);
}
.ld-dash-completion-track {
    height: 6px;
    background: var(--ld-gray-100);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}
.ld-dash-completion-fill {
    height: 100%;
    background: var(--ld-accent);
    border-radius: 99px;
    transition: width 0.5s ease;
}
.ld-dash-completion-tasks {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    overflow: hidden;
}
.ld-dash-task {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem;
    text-decoration: none;
    transition: background 0.12s;
    background: var(--ld-content-bg);
    border-bottom: 1px solid var(--ld-border);
    border-radius: 0;
}
.ld-dash-task:last-child {
    border-bottom: none;
}
.ld-dash-task:hover {
    background: var(--ld-gray-50);
}
.ld-dash-task-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--ld-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(99,102,241,0.1);
}
.ld-dash-task-icon svg {
    width: 16px;
    height: 16px;
    color: #6366F1;
}
.ld-dash-task.done .ld-dash-task-icon {
    background: var(--ld-success-surface);
    border-color: var(--ld-success-border);
}
.ld-dash-task.done .ld-dash-task-icon svg {
    color: #16a34a;
}
.ld-dash-task-content {
    flex: 1;
    min-width: 0;
}
.ld-dash-task-label {
    font-size: var(--ld-font-size-sm);
    font-weight: 600;
    color: var(--ld-gray-900);
}
.ld-dash-task.done .ld-dash-task-label {
}
.ld-dash-task-desc {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-600);
    margin-top: 0.125rem;
}
.ld-dash-task-cta {
    flex-shrink: 0;
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    color: var(--ld-gray-700);
    background: var(--ld-content-bg);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    padding: 0.4rem 0.85rem;
    transition: background 0.12s, border-color 0.12s;
}
.ld-dash-task:hover .ld-dash-task-cta {
    background: var(--ld-gray-100);
    border-color: var(--ld-gray-300);
}

/* Quick actions */
.ld-dash-section-title {
    font-size: var(--ld-font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ld-gray-400);
    margin: 0 0 0.75rem;
}
.ld-dash-actions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}
.ld-dash-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 1.25rem 1rem;
    background: white;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    text-decoration: none;
    transition: all 0.15s;
}
.ld-dash-action-card:hover {
    border-color: var(--ld-gray-300);
    background: var(--ld-gray-50);
}
.ld-dash-action-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--ld-radius-md);
    background: var(--ld-accent-50);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ld-dash-action-icon svg {
    width: 20px;
    height: 20px;
    color: var(--ld-accent);
}
.ld-dash-action-label {
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    color: var(--ld-gray-700);
    text-align: center;
}

/* Affiliate promo */
.ld-dash-affiliate {
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
}
.ld-dash-affiliate-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    background: #fff !important;
}
.ld-dash-affiliate-body {
    flex: 1;
    min-width: 0;
}
.ld-dash-affiliate-headline {
    margin: 0 0 0.375rem;
    font-size: var(--ld-font-size-base);
    font-weight: 600;
    color: var(--ld-gray-900);
    line-height: 1.35;
}
.ld-dash-affiliate-text {
    margin: 0;
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-600);
    line-height: 1.45;
}
.ld-dash-affiliate-cta {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .ld-dash-hero {
        flex-direction: column;
        align-items: flex-start;
    }
    .ld-dash-actions-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ld-dash-publish-banner {
        flex-direction: column;
        text-align: center;
    }
    .ld-dash-affiliate-card {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .ld-dash-affiliate-cta {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================
   OPTION CARDS (Tone selector, etc)
   ===================================================== */
.ld-option-card {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border: 2px solid transparent;
    border-radius: var(--ld-radius-md);
    cursor: pointer;
    background: var(--ld-gray-50);
    transition: all 0.15s ease;
}

.ld-option-card:hover {
    background: var(--ld-gray-100);
}

.ld-option-card.selected {
    border-color: var(--ld-accent);
    background: var(--ld-accent-50);
}

.ld-option-card input[type="radio"] {
    margin-top: 0.125rem;
    accent-color: var(--ld-accent);
    flex-shrink: 0;
}

.ld-option-card-content {
    flex: 1;
}

.ld-option-card-title {
    font-weight: 600;
    font-size: var(--ld-font-size-base);
    color: var(--ld-gray-900);
    margin-bottom: 0.25rem;
}

.ld-option-card-desc {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-500);
    line-height: 1.4;
}

.ld-option-card-hint {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-400);
    margin-top: 0.375rem;
}

/* Tone options layout */
.ld-tone-options {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

/* =====================================================
   DOMAIN CHECKER
   ===================================================== */
.ld-domain-checker {
    display: flex;
    gap: var(--ld-spacing-2);
}

.ld-domain-input {
    flex: 1;
}

.ld-domain-extension {
    width: 120px;
}

.ld-domain-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: var(--ld-radius-md);
    margin-top: 0.75rem;
    font-size: var(--ld-font-size-sm);
}

.ld-domain-status.available {
    background-color: var(--ld-success-bg);
    color: var(--ld-success-dark);
}

.ld-domain-status.unavailable {
    background-color: var(--ld-error-bg);
    color: var(--ld-error);
}

.ld-domain-status.checking {
    background-color: var(--ld-gray-100);
    color: var(--ld-gray-600);
}

.ld-domain-status.warning {
    background-color: var(--ld-warning-bg);
    color: #b45309;
}

/* =====================================================
   PLAN SELECTOR
   ===================================================== */
.ld-plans {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--ld-spacing-4);
}

.ld-plan {
    border: 2px solid transparent;
    border-radius: var(--ld-radius-lg);
    padding: var(--ld-spacing-6);
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--ld-gray-50);
}

.ld-plan:hover {
    background: var(--ld-gray-100);
}

.ld-plan.selected {
    border-color: var(--ld-accent);
    background: var(--ld-accent-50);
}

.ld-plan-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.ld-plan-name {
    font-weight: 600;
    color: var(--ld-gray-900);
}

.ld-plan-badge {
    font-size: var(--ld-font-size-xs);
    padding: 0.125rem 0.5rem;
    background-color: var(--ld-accent);
    color: white;
    border-radius: var(--ld-radius-full);
    font-weight: 600;
}

.ld-plan-price {
    font-size: var(--ld-font-size-2xl);
    font-weight: 700;
    color: var(--ld-gray-900);
    margin-bottom: 0.5rem;
}

.ld-plan-price span {
    font-size: var(--ld-font-size-2xl);
    font-weight: 600;
    color: var(--ld-gray-800);
}
.ld-price-period {
    font-size: 0.875rem !important;
    margin-left: 0 !important;
}
.ld-plan-description {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-600);
}

/* =====================================================
   IMAGE UPLOADER
   ===================================================== */
.ld-image-upload {
    display: flex;
    gap: var(--ld-spacing-5);
}

.ld-image-item {
    text-align: center;
}

.ld-image-preview {
    width: 100px;
    height: 100px;
    border: 2px dashed var(--ld-gray-300);
    border-radius: var(--ld-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ld-gray-50);
    margin-bottom: 0.5rem;
    overflow: hidden;
    transition: border-color 0.12s ease;
}

.ld-image-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ld-image-preview.empty {
    color: var(--ld-gray-400);
    cursor: pointer;
}

.ld-image-preview.empty:hover {
    border-color: var(--ld-accent);
    color: var(--ld-accent);
}

.ld-image-label {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-600);
}

/* =====================================================
   ALERTS
   ===================================================== */
.ld-alert {
    padding: 1rem;
    border-radius: var(--ld-radius-md);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: var(--ld-font-size-sm);
}

.ld-alert-info {
    background-color: rgba(59, 130, 246, 0.1);
    color: #1d4ed8;
}

.ld-alert-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--ld-success-dark);
}

.ld-alert-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: #b45309;
}

.ld-alert-error {
    background-color: rgba(239, 68, 68, 0.1);
    color: #dc2626;
}

/* Hamburger toggle button — hidden on desktop, shown on mobile/tablet */
.ld-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--ld-gray-50);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    width: 40px;
    height: 40px;
    cursor: pointer;
    color: var(--ld-gray-700);
    flex-shrink: 0;
    transition: background 0.15s;
    padding: 0;
}
.ld-sidebar-toggle:hover {
    background: var(--ld-gray-100);
}
.ld-sidebar-toggle:active {
    background: var(--ld-gray-200);
}

/* Floating toggle — only visible on mobile when sidebar is closed */
.ld-sidebar-toggle--floating {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: var(--ld-z-sidebar);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid var(--ld-border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.ld-sidebar-toggle--floating:hover { background: var(--ld-gray-50); }
/* Hide floating toggle on editor (it has its own in-header toggle) */
.page-template-templates-page-editar-sitio .ld-sidebar-toggle--floating { display: none !important; }

/* Overlay behind sidebar on mobile */
.ld-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: var(--ld-z-sidebar-overlay);
}
.ld-sidebar-overlay.active {
    display: block;
}

/* Editor header actions */
.ld-editor-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    overflow: visible;
}
.ld-editor-action-btn {
    font-size: var(--ld-font-size-sm);
    padding: 0.5rem 1rem;
    gap: 0.375rem;
    text-decoration: none;
}
.ld-editor-action-btn.ld-save-btn {
    padding: 0.5rem 1.125rem;
}

/* Unsaved changes: white dot + circular ring pulse (same technique as support chat bubble) */
@keyframes ld-unsaved-dot-ring-pulse {
    0%   { transform: scale(1);   opacity: 0.45; }
    100% { transform: scale(2.75); opacity: 0; }
}
.ld-save-btn-pulse-wrap {
    position: relative;
    display: inline-flex;
    overflow: visible;
}
#save-btn:has(.ld-unsaved-dot) {
    overflow: visible;
}
#save-btn .ld-unsaved-dot {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fff;
    margin-left: 6px;
    flex-shrink: 0;
    z-index: 1;
}
#save-btn.ld-save-btn--busy .ld-unsaved-dot {
    display: none !important;
}
#save-btn .ld-unsaved-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
    transform-origin: center;
    animation: ld-unsaved-dot-ring-pulse 2.4s ease-out infinite;
    z-index: -1;
}
#save-btn:hover .ld-unsaved-dot::after,
#save-btn:focus-visible .ld-unsaved-dot::after {
    animation-play-state: paused;
    opacity: 0;
}

.ld-editor-draft-toast {
    position: fixed;
    left: 50%;
    bottom: calc(1.25rem + var(--ld-mobile-safe-bottom, 0px));
    transform: translate(-50%, 12px);
    max-width: min(92vw, 420px);
    padding: 0.7rem 0.95rem;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.94);
    color: #fff;
    font-size: var(--ld-font-size-xs);
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    z-index: var(--ld-z-critical);
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}

.ld-editor-draft-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.ld-editor-draft-toast[data-type="error"] {
    background: rgba(185, 28, 28, 0.96);
}

/* Autosave status chip (Wix-style): discreet "Guardando… / Guardado" indicator */
.ld-autosave-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: var(--ld-font-size-xs, 0.75rem);
    font-weight: 600;
    line-height: 1;
    color: var(--ld-gray-600, #4b5563);
    background: var(--ld-gray-100, #f3f4f6);
    border: 1px solid var(--ld-border, #e5e7eb);
    white-space: nowrap;
    transition: color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.ld-autosave-chip[hidden] { display: none; }
.ld-autosave-chip-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--ld-gray-400, #9ca3af);
    flex-shrink: 0;
}
.ld-autosave-chip[data-state="saving"] .ld-autosave-chip-dot {
    background: var(--ld-amber-500, #f59e0b);
    animation: ld-autosave-pulse 1s ease-in-out infinite;
}
.ld-autosave-chip[data-state="saved"] {
    color: var(--ld-green-700, #15803d);
    background: var(--ld-green-50, #f0fdf4);
    border-color: var(--ld-green-200, #bbf7d0);
}
.ld-autosave-chip[data-state="saved"] .ld-autosave-chip-dot {
    background: var(--ld-green-500, #22c55e);
}
.ld-autosave-chip[data-state="error"] {
    color: var(--ld-red-700, #b91c1c);
    background: var(--ld-red-50, #fef2f2);
    border-color: var(--ld-red-200, #fecaca);
}
.ld-autosave-chip[data-state="error"] .ld-autosave-chip-dot {
    background: var(--ld-red-500, #ef4444);
}
@keyframes ld-autosave-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
@media (max-width: 640px) {
    /* En móvil mantenemos el texto (más claro que solo un punto), pero compacto. */
    .ld-autosave-chip-text { display: inline; font-size: 0.7rem; }
    .ld-autosave-chip { padding: 0.3rem 0.5rem; gap: 0.3rem; }
}

/* Pulso de atención del chip la primera vez que se autoguarda: llama la atención
   una sola vez para que el usuario descubra que sus cambios se guardan solos. */
@keyframes ld-autosave-chip-attn {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
    40%  { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.ld-autosave-chip.ld-autosave-chip--attn {
    animation: ld-autosave-chip-attn 0.9s ease-out 2;
}

/* Campo con error de validación (ej. email/teléfono antes de publicar). */
.ld-field-invalid,
.ld-editor-input.ld-field-invalid {
    border-color: var(--ld-red-500, #ef4444) !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
    outline: none;
}

/* Tooltip de "cambios sin publicar": aparece bajo el botón Publicar al hover,
   solo cuando el botón tiene cambios pendientes (.ld-save-btn--has-server-draft). */
.ld-save-tooltip {
    position: absolute;
    top: calc(100% + 9px);
    right: 0;
    z-index: var(--ld-z-critical, 1000);
    padding: 0.5rem 0.7rem;
    border-radius: 8px;
    background: rgba(17, 24, 39, 0.96);
    color: #fff;
    font-size: var(--ld-font-size-xs, 0.75rem);
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
    pointer-events: none;
}
/* Flechita hacia arriba, alineada bajo el punto (extremo derecho del botón). */
.ld-save-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 16px;
    border: 5px solid transparent;
    border-bottom-color: rgba(17, 24, 39, 0.96);
}
#save-btn.ld-save-btn--has-server-draft:hover + .ld-save-tooltip,
#save-btn.ld-save-btn--has-server-draft:focus-visible + .ld-save-tooltip,
#save-btn.ld-save-btn--has-server-draft:focus + .ld-save-tooltip,
#save-btn.ld-save-btn--has-server-draft:active + .ld-save-tooltip,
.ld-publish-site-btn:hover + .ld-save-tooltip,
.ld-publish-site-btn:focus-visible + .ld-save-tooltip,
.ld-publish-site-btn:focus + .ld-save-tooltip,
.ld-publish-site-btn:active + .ld-save-tooltip,
/* Touch: mostrar el tooltip cuando el usuario lo abre con un tap (JS agrega la clase). */
.ld-save-btn-pulse-wrap.ld-tooltip-open .ld-save-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.ld-save-tooltip--multiline {
    white-space: normal;
    max-width: min(320px, 85vw);
    text-align: center;
}
/* Tooltip de "Publicar sitio" (offline): más ancho que el botón, flecha centrada. */
.ld-save-tooltip--publish-site {
    left: 50%;
    right: auto;
    min-width: 280px;
    transform: translateX(-50%) translateY(-4px);
}
.ld-save-tooltip--publish-site::before {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}
.ld-publish-site-btn:hover + .ld-save-tooltip--publish-site,
.ld-publish-site-btn:focus-visible + .ld-save-tooltip--publish-site,
.ld-publish-site-btn:focus + .ld-save-tooltip--publish-site,
.ld-publish-site-btn:active + .ld-save-tooltip--publish-site,
.ld-save-btn-pulse-wrap.ld-tooltip-open .ld-save-tooltip--publish-site {
    transform: translateX(-50%) translateY(0);
}

.ld-editor-draft-recovery {
    position: fixed;
    inset: 0;
    z-index: var(--ld-z-critical);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(var(--ld-overlay-blur, 6px));
    -webkit-backdrop-filter: blur(var(--ld-overlay-blur, 6px));
}

.ld-editor-draft-recovery-card {
    width: min(100%, 440px);
    padding: 1.5rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24);
    text-align: center;
}

.ld-editor-draft-recovery-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin-bottom: 0.8rem;
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.12);
    color: #92400e;
    font-weight: 800;
}

.ld-editor-draft-recovery-card h3 {
    margin: 0 0 0.45rem;
    color: var(--ld-gray-900);
    font-size: var(--ld-font-size-xl);
}

.ld-editor-draft-recovery-card p {
    margin: 0;
    color: var(--ld-gray-600);
    font-size: var(--ld-font-size-sm);
    line-height: 1.5;
}

.ld-editor-draft-recovery-actions {
    display: flex;
    justify-content: center;
    gap: 0.65rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

/* -- Editor "More" dropdown (3 dots) -------------------------------------- */
.ld-editor-more-wrap {
    position: relative;
}
.ld-editor-more-btn {
    padding: 0.74rem 0.5rem !important;
    min-width: 34px;
    justify-content: center;
}
.ld-editor-more-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 190px;
    background: #fff;
    border: 1px solid var(--ld-gray-200);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 0.375rem 0;
    z-index: var(--ld-z-dropdown);
    animation: ldDropdownIn 0.12s ease-out;
}
.ld-editor-more-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.5rem 0.875rem;
    font-size: var(--ld-font-size-control);
    color: var(--ld-gray-700);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.1s;
    white-space: nowrap;
}
.ld-editor-more-item:hover {
    background: var(--ld-gray-50);
    color: var(--ld-gray-900);
}
.ld-editor-more-item svg {
    color: var(--ld-gray-400);
    flex-shrink: 0;
}

/* (Responsive rules moved to end of file) */

@media (max-width: 640px) {
    .ld-content,
    .ld-dashboard,
    .ld-contact-page,
    .ld-universal-header ~ .ld-content {
        padding: 0;
    }
    
    .ld-plans {
        grid-template-columns: 1fr;
    }
    
    .ld-image-upload {
        flex-wrap: wrap;
    }
    
    .ld-wizard {
        padding: var(--ld-spacing-4);
    }
    
    .ld-wizard-content {
        padding: var(--ld-spacing-5);
    }
}


/* -- Affiliates page -- */
.ld-aff-page {
    padding: 0;
}

/* -- Join landing (State A) -- */
.ld-aff-join-hero {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    border-radius: var(--ld-radius-lg);
    padding: 3rem 2.5rem;
    text-align: center;
    margin-bottom: var(--ld-spacing-6);
}
.ld-aff-join-hero-inner { max-width: 560px; margin: 0 auto; }
.ld-aff-join-hero h1 { font-size: var(--ld-font-size-3xl); font-weight: 700; color: #fff; margin: 0 0 0.75rem; letter-spacing: -0.025em; }
.ld-aff-join-hero p { font-size: var(--ld-font-size-md); color: rgba(255,255,255,0.85); margin: 0 0 2rem; line-height: 1.6; }
.ld-aff-join-cta-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.ld-aff-join-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.75rem 2rem; background: #fff; color: #4F46E5;
    border: none; border-radius: 8px; font-size: var(--ld-font-size-md); font-weight: 600;
    cursor: pointer; font-family: inherit; transition: background 0.15s, transform 0.1s;
    text-decoration: none;
}
.ld-aff-join-btn:hover { background: #F5F3FF; transform: translateY(-1px); }
.ld-aff-join-btn:disabled { opacity: 0.7; cursor: wait; }
.ld-aff-join-btn svg { width: 16px; height: 16px; }
.ld-aff-join-note { font-size: var(--ld-font-size-xs); color: rgba(255,255,255,0.6); }

.ld-aff-join-benefits {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
    margin-bottom: var(--ld-spacing-6);
}
.ld-aff-join-card {
    background: var(--ld-content-bg); border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md); padding: 2rem;
}
.ld-aff-join-benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.ld-aff-benefit { text-align: left; }
.ld-aff-benefit-icon { width: 40px; height: 40px; background: rgba(99,102,241,0.1); border-radius: var(--ld-radius-md); display: flex; align-items: center; justify-content: center; margin-bottom: 0.875rem; }
.ld-aff-benefit-icon svg { width: 20px; height: 20px; color: #6366F1; }
.ld-aff-benefit h3 { font-size: var(--ld-font-size-control); font-weight: 600; color: var(--ld-gray-900); margin: 0 0 0.375rem; }
.ld-aff-benefit p { font-size: var(--ld-font-size-xs); color: var(--ld-gray-500); margin: 0; line-height: 1.5; }
.ld-aff-join-divider { height: 1px; background: var(--ld-border); margin: 1.75rem 0; }
.ld-aff-join-steps h3 { font-size: var(--ld-font-size-2xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ld-gray-500); margin: 0 0 1rem; }
.ld-aff-join-steps-row { display: flex; gap: 1rem; }
.ld-aff-step-item { flex: 1; display: flex; align-items: center; gap: 0.625rem; font-size: var(--ld-font-size-muted); color: var(--ld-gray-700); padding: 0.875rem 1rem; background: var(--ld-gray-50); border-radius: var(--ld-radius-md); }
.ld-aff-step-item span { width: 24px; height: 24px; background: var(--ld-primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--ld-font-size-2xs); flex-shrink: 0; }
.ld-aff-join-cta { text-align: center; }
.ld-aff-cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--ld-primary); color: #fff; font-weight: 600; padding: 0.875rem 1.75rem; border-radius: var(--ld-radius-md); font-size: var(--ld-font-size-control); }
.ld-aff-cta-btn:hover { background: var(--ld-accent-700); }
.ld-aff-cta-btn svg { width: 18px; height: 18px; }

/* -- Dashboard hero (State B) -- */
.ld-aff-dash-hero {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    border-radius: var(--ld-radius-lg);
    padding: 1.75rem 2rem;
    color: #fff;
    margin-bottom: var(--ld-spacing-6);
}
.ld-aff-dash-hero-top {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem;
}
.ld-aff-dash-hero-top h1 { font-size: var(--ld-font-size-xl); font-weight: 700; color: #fff; margin: 0 0 0.25rem; }
.ld-aff-dash-hero-top p { font-size: var(--ld-font-size-xs); color: rgba(255,255,255,0.7); margin: 0; }
.ld-aff-dash-badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.625rem; background: rgba(255,255,255,0.15);
    color: #fff; border-radius: 99px; font-size: var(--ld-font-size-2xs); font-weight: 500;
    white-space: nowrap;
}
.ld-aff-dash-badge-dot { width: 6px; height: 6px; background: #4ADE80; border-radius: 50%; }

.ld-aff-dash-hero-balance {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1.5rem; flex-wrap: wrap;
    padding-bottom: 1.25rem; margin-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.ld-aff-dash-balance-label {
    font-size: var(--ld-font-size-2xs); color: rgba(255,255,255,0.55);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem;
}
.ld-aff-dash-balance-amount {
    display: block; font-size: var(--ld-font-size-display-md); font-weight: 700;
    color: #fff; line-height: 1; margin-bottom: 0.25rem;
}
.ld-aff-dash-balance-sub { font-size: var(--ld-font-size-xs); color: rgba(255,255,255,0.6); }

.ld-aff-dash-balance-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.ld-aff-dash-action-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1rem; background: rgba(255,255,255,0.15);
    color: #fff; border: none; border-radius: 8px;
    font-size: var(--ld-font-size-xs); font-weight: 500; cursor: pointer;
    font-family: inherit; transition: background 0.12s; white-space: nowrap;
}
.ld-aff-dash-action-btn:hover { background: rgba(255,255,255,0.25); }
.ld-aff-dash-action-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.ld-aff-dash-action-btn--outline { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2); }
.ld-aff-dash-action-btn--outline:hover { background: rgba(255,255,255,0.15); }
.ld-aff-dash-action-btn.disabled { opacity: 0.4; cursor: not-allowed; }

.ld-aff-dash-hero-stats {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.ld-aff-dash-stat { text-align: center; }
.ld-aff-dash-stat-val { font-size: var(--ld-font-size-lg); font-weight: 700; color: #fff; margin-bottom: 0.15rem; display: block; }
.ld-aff-dash-stat-label { font-size: var(--ld-font-size-micro); color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.04em; }

@media (max-width: 768px) {
    .ld-aff-join-hero { padding: 2rem 1.5rem; }
    .ld-aff-join-hero h1 { font-size: var(--ld-font-size-xl); }
    .ld-aff-join-card { padding: 1.5rem; }
    .ld-aff-join-benefits { grid-template-columns: 1fr; gap: 1.5rem; }
    .ld-aff-join-steps-row { flex-direction: column; gap: 0.75rem; }
    .ld-aff-dash-hero { padding: 1.25rem; }
    .ld-aff-dash-hero-balance { flex-direction: column; align-items: flex-start; }
    .ld-aff-dash-hero-stats { grid-template-columns: repeat(2, 1fr); }
    .ld-aff-dash-balance-amount { font-size: var(--ld-font-size-display-sm); }
}

/* Free months banner */
.ld-aff-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--ld-gray-900);
    color: #fff;
    border-radius: var(--ld-radius-lg);
    padding: 1.125rem 1.5rem;
    margin-bottom: var(--ld-spacing-6);
}

.ld-aff-banner-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.12);
    border-radius: var(--ld-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ld-aff-banner-icon svg {
    width: 22px;
    height: 22px;
}

.ld-aff-banner-count {
    font-size: 2rem;
    font-weight: 700;
    text-align: right;
    line-height: 1;
    flex-shrink: 0;
}

.ld-aff-banner-count small {
    display: block;
    font-size: var(--ld-font-size-xs);
    font-weight: 400;
    opacity: .7;
    margin-top: 0.2rem;
}

/* Old hero kept for backwards compat (now using .ld-aff-dash-hero) */
.ld-btn-disabled {
    opacity: .45;
    cursor: not-allowed !important;
}

/* Link + QR grid */
.ld-aff-link-grid {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: var(--ld-spacing-5);
    margin-bottom: var(--ld-spacing-6);
    align-items: start;
}

.ld-aff-link-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ld-spacing-4);
}

.ld-aff-link-header h2 {
    font-size: var(--ld-font-size-base);
    font-weight: 600;
    color: var(--ld-gray-900);
    margin: 0;
}

.ld-aff-link-customize {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: none;
    border: none;
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    color: var(--ld-accent);
    cursor: pointer;
    padding: 0;
}

.ld-aff-link-customize:hover {
    text-decoration: underline;
}

.ld-aff-link-customize svg {
    width: 14px;
    height: 14px;
}

.ld-aff-link-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: var(--ld-spacing-4);
}

.ld-aff-link-input {
    flex: 1;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: var(--ld-font-size-sm) !important;
    background: var(--ld-gray-50) !important;
}

.ld-aff-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.ld-aff-copy-btn svg {
    width: 16px;
    height: 16px;
}

/* Share buttons */
.ld-aff-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.ld-aff-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border-radius: var(--ld-radius-md);
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: opacity 0.12s;
}

.ld-aff-share-btn:hover { opacity: .85; }

.ld-aff-share-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.ld-aff-share-wa  { background: #25D366; color: #fff; }
.ld-aff-share-x   { background: #000; color: #fff; }
.ld-aff-share-li  { background: #0A66C2; color: #fff; }
.ld-aff-share-msg { background: var(--ld-gray-100); color: var(--ld-gray-700); }

/* QR card */
.ld-aff-qr-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    text-align: center;
}

.ld-aff-qr-img {
    border-radius: var(--ld-radius-md);
    width: 140px;
    height: 140px;
}

.ld-aff-qr-download {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--ld-font-size-sm);
    color: var(--ld-accent);
    font-weight: 500;
    text-decoration: none;
}

.ld-aff-qr-download:hover { text-decoration: underline; }

.ld-aff-qr-download svg {
    width: 14px;
    height: 14px;
}

/* Shared section label (outside white card) ? same style for "C?mo funciona" and "Top Socios" */
.ld-aff-section-label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ld-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: var(--ld-spacing-3);
}

.ld-aff-section-label svg {
    width: 14px;
    height: 14px;
    color: var(--ld-gray-400);
    flex-shrink: 0;
}

/* How it works */
.ld-aff-how {
    background: var(--ld-content-bg);
    border-radius: var(--ld-radius-lg);
    padding: 1.25rem var(--ld-spacing-6);
    margin-bottom: var(--ld-spacing-6);
}

.ld-aff-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.ld-aff-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.ld-aff-step-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ld-accent);
    color: #fff;
    font-size: var(--ld-font-size-sm);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ld-aff-step-title {
    font-size: var(--ld-font-size-sm);
    font-weight: 600;
    color: var(--ld-gray-900);
    margin-bottom: 0.15rem;
}

.ld-aff-step-sub {
    font-size: 0.75rem;
    color: var(--ld-gray-500);
}

/* Tabs */
.ld-aff-tabs-card {
    margin-bottom: var(--ld-spacing-6);
    overflow: hidden;
}

.ld-aff-tabs-nav {
    display: flex;
    border-bottom: 2px solid var(--ld-gray-100);
    overflow-x: auto;
    overflow-y: hidden;
}

.ld-aff-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    color: var(--ld-gray-500);
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.12s, border-color 0.12s;
    margin-bottom: -1px;
}

.ld-aff-tab svg {
    width: 15px;
    height: 15px;
}

.ld-aff-tab:hover {
    color: var(--ld-gray-900);
}

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

.ld-aff-tab-panel {
    padding: var(--ld-spacing-5) var(--ld-spacing-6);
}

/* Fixed height so the card never jumps between skeleton, empty state and data */
.ld-aff-tab-body {
    min-height: 200px;
}

/* Leaderboard section */
.ld-aff-section-block {
    margin-bottom: var(--ld-spacing-6);
}

/* Skeleton loader */
@keyframes ld-shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.ld-sk {
    display: inline-block;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--ld-gray-200) 25%, var(--ld-gray-100) 50%, var(--ld-gray-200) 75%);
    background-size: 800px 100%;
    animation: ld-shimmer 1.4s ease-in-out infinite;
}

/* Page skeleton shown before JS loads */
.ld-aff-page-skeleton {
    display: flex;
    flex-direction: column;
    gap: var(--ld-spacing-5);
}

.ld-aff-page-skeleton.hidden {
    display: none;
}

/* Responsive ? affiliates */
@media (max-width: 768px) {
    .ld-aff-link-grid {
        grid-template-columns: 1fr;
    }

    .ld-aff-steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .ld-aff-steps {
        grid-template-columns: 1fr;
    }
}

/* -- Help page layout -- */
.ld-help-page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0;
}

.ld-content:has(.ld-help-page) {
    background: transparent;
    border: none;
    padding: 24px;
}

/* Search bar */
.ld-help-search-wrap {
    margin-bottom: var(--ld-spacing-5);
}

.ld-help-search {
    position: relative;
    max-width: 100%;
}

.ld-help-search svg:first-child {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--ld-gray-400);
    pointer-events: none;
}

.ld-help-search input {
    width: 100%;
    padding: 0.75rem 2.5rem 0.75rem 2.5rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    font-size: var(--ld-font-size-base);
    background: #fff;
    color: var(--ld-gray-900);
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ld-help-search input:focus {
    outline: none;
    background: #fff;
    border-color: var(--ld-gray-400);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.ld-help-search input::placeholder {
    color: var(--ld-gray-400);
}

.ld-help-search #clear-search,
.ld-help-search #ia-clear-search {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--ld-gray-400);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ld-help-search #clear-search:hover,
.ld-help-search #ia-clear-search:hover {
    color: var(--ld-gray-700);
}

.ld-help-search #clear-search svg,
.ld-help-search #ia-clear-search svg {
    width: 16px;
    height: 16px;
}

/* Category filters ? segmented control */
.ld-help-filters {
    display: inline-flex;
    align-self: flex-start;
    background: #EEE;
    border-radius: var(--ld-radius-sm);
    padding: 4px;
    margin-bottom: var(--ld-spacing-4);
}

.ld-help-page .ld-help-category-filters {
    display: flex;
    flex-wrap: wrap;
    max-width: 100%;
    gap: 2px;
}
.ld-help-filters + .ld-editor-card-title {
    margin-top: 0;
    margin-bottom: -0.25rem;
}

.ld-editor-card + h3.ld-editor-card-title {
    margin-top: 2.25rem !important
}
.ld-filter-btn {
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
    border-radius: calc(var(--ld-radius-sm) - 2px);
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-700);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ld-filter-btn:hover {
    color: var(--ld-gray-800);
}

.ld-filter-btn.active {
    background: #fff;
    color: var(--ld-gray-900);
    font-weight: 500;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* Editor-only experiment: underlined tabs (easy rollback: remove ld-editor-tabs-underlined class/CSS) */
.ld-editor-tabs-underlined {
    display: flex;
    width: 100%;
    align-self: stretch;
    gap: 0.5rem;
    padding: 0;
    background: transparent;
    border-bottom: 1px solid var(--ld-border);
    border-radius: 0;
    margin-bottom: 2.25rem !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.ld-panel-controls .ld-editor-tabs-underlined {
    margin-bottom: 0 !important;
}

.ld-help-page .ld-help-category-filters.ld-editor-tabs-underlined {
    flex-wrap: nowrap;
    gap: 0.5rem;
}

.ld-editor-tabs-underlined::-webkit-scrollbar {
    display: none;
}

.ld-editor-tabs-underlined .ld-filter-btn {
    position: relative;
    padding: 0.625rem .75rem 0.75rem;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    color: #767676;
    background: transparent;
    box-shadow: none;
    font-weight: 500;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    letter-spacing: .2px;
}

.ld-editor-tabs-underlined .ld-filter-btn:hover {
    color: var(--ld-gray-900);
}

.ld-editor-tabs-underlined .ld-filter-btn.active {
    color: var(--ld-gray-900);
    background: transparent;
    border-bottom-color: var(--ld-gray-900);
    box-shadow: none;

}

/* FAQ list ? card unificado */
.ld-faq-list {
    background: #fff;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    overflow: hidden;
}

.ld-faq-item {
    border-top: 1px solid var(--ld-border);
    transition: background 0.12s;
}

.ld-faq-item:first-child {
    border-top: none;
}

.ld-faq-item.hidden {
    display: none;
}

.ld-faq-question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.625rem 0.875rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: var(--ld-font-size-base);
    font-weight: 500;
    color: var(--ld-gray-900);
    transition: background 0.12s;
}

.ld-faq-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--ld-gray-900);
    transition: transform 0.2s;
}

.ld-faq-item.open .ld-faq-icon {
    transform: rotate(180deg);
    color: var(--ld-gray-900);
}

.ld-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease-out;
}

.ld-faq-item.open .ld-faq-answer {
    max-height: 500px;
}

.ld-faq-answer p {
    padding: 0 0.875rem 0.875rem;
    color: var(--ld-gray-500);
    line-height: 1.6;
    margin: 0;
    font-size: var(--ld-font-size-base);
    padding-top: 0.25rem;
}

/* Empty state */
.ld-faq-empty {
    text-align: center;
    padding: 3rem;
    color: var(--ld-gray-500);
}

.ld-faq-empty svg {
    width: 40px;
    height: 40px;
    color: var(--ld-gray-300);
    margin: 0 auto 1rem;
    display: block;
}

.ld-faq-empty p {
    margin: 0 0 1rem;
    font-size: var(--ld-font-size-base);
}

.ld-faq-empty button {
    background: none;
    border: none;
    color: var(--ld-accent);
    cursor: pointer;
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    text-decoration: underline;
}

/* CTA footer */
.ld-help-footer {
    margin-top: var(--ld-spacing-8);
}

.ld-help-cta {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--ld-accent);
    border-radius: var(--ld-radius-md);
    color: #fff;
    position: relative;
    border: 1px solid rgba(255,255,255,.15);
    backdrop-filter: blur(12px);
}

.ld-help-cta--top {
    margin-bottom: var(--ld-spacing-6);
}

.ld-help-cta-icon {
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.1);
    border-radius: var(--ld-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ld-help-cta-icon svg {
    width: 22px;
    height: 22px;
    color: #fff;
}

.ld-help-cta-content {
    flex: 1;
}

.ld-help-cta-content h3 {
    font-size: var(--ld-font-size-base);
    font-weight: 600;
    margin: 0 0 0.2rem;
}

.ld-help-cta-content p {
    margin: 0;
    font-size: var(--ld-font-size-sm);
    color: rgba(255, 255, 255, .8);
}

.ld-help-cta .ld-btn-primary {
    background: #fff;
    color: var(--ld-accent);
    white-space: nowrap;
    flex-shrink: 0;
}

.ld-help-cta .ld-btn-primary:hover {
    background: var(--ld-accent-50);
    border-color: #fff;
    color: var(--ld-accent-dark);
}

@media (max-width: 640px) {
    .ld-help-page {
        padding: 0;
    }

    .ld-help-cta {
        flex-direction: column;
        text-align: center;
    }

    .ld-help-cta .ld-btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* Modal overlay backdrop blur (shared — excludes tour spotlight) */
.ld-modal-overlay,
.ld-ai-modal-overlay,
.ld-seo-modal-overlay,
.ld-live-modal-overlay,
.ld-unsaved-modal-overlay,
.ld-color-tone-overlay,
.ld-confirm-overlay,
.ld-reseller-modal-backdrop,
.ld-draft-modal,
.ld-preview-modal,
.ld-cmd-overlay,
#dns-why-modal,
#cancel-modal-overlay,
.ld-tour-optin-overlay,
.ld-sc-backdrop,
#sidebar-overlay {
    backdrop-filter: blur(var(--ld-overlay-blur, 6px));
    -webkit-backdrop-filter: blur(var(--ld-overlay-blur, 6px));
}

/* Modals */
.ld-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: var(--ld-z-modal);
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.ld-modal-box {
    background: white;
    border-radius: var(--ld-radius-md);
    border: 1px solid var(--ld-border);
    padding: var(--ld-spacing-8);
    max-width: 440px;
    width: 100%;
}

.ld-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ld-spacing-4);
}

.ld-modal-header h3 {
    font-size: var(--ld-font-size-lg);
    font-weight: 600;
    color: var(--ld-gray-900);
    margin: 0;
}

.ld-modal-close {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--ld-gray-400);
    display: flex;
}

.ld-modal-close:hover { color: var(--ld-gray-700); }
.ld-modal-close svg { width: 18px; height: 18px; }

.ld-modal-counter {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ld-modal-counter-btn {
    width: 38px;
    height: 38px;
    border-radius: var(--ld-radius-md);
    border: none;
    background: var(--ld-gray-100);
    font-size: var(--ld-font-size-xl);
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.12s;
}

.ld-modal-counter-btn:hover { background: var(--ld-gray-200); }

.ld-modal-counter .ld-form-input {
    flex: 1;
}

.ld-modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: var(--ld-spacing-5);
}

.ld-modal-actions .ld-btn {
    flex: 1;
    justify-content: center;
}

/* Editor: unsaved changes modal */
.ld-unsaved-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: var(--ld-z-critical);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: ld-modal-fadein 0.2s ease;
}
.ld-unsaved-modal-overlay[hidden] {
    display: none !important;
}
.ld-unsaved-modal-box {
    background: white;
    border-radius: var(--ld-radius-xl);
    border: 1px solid var(--ld-border);
    padding: 2rem 2rem 1.75rem;
    max-width: 420px;
    width: 100%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.ld-unsaved-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FEF3C7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}
.ld-unsaved-modal-icon svg {
    width: 32px;
    height: 32px;
    color: #D97706;
}
.ld-unsaved-modal-title {
    font-size: var(--ld-font-size-modal-title);
    font-weight: 700;
    color: var(--ld-gray-900);
    margin: 0 0 0.75rem;
    line-height: 1.3;
}
.ld-unsaved-modal-text {
    font-size: var(--ld-font-size-control);
    color: var(--ld-gray-600);
    margin: 0;
    line-height: 1.4;
}
.ld-unsaved-modal-text strong {
    font-weight: normal;
}
.ld-unsaved-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1.5rem;
}
.ld-unsaved-modal-actions .ld-btn {
    width: 100%;
    justify-content: center;
}
.ld-unsaved-leave-btn {
    color: #B91C1C;
    border-color: #fedfdf;
    background: #fedfdf;
}
.ld-unsaved-leave-btn:hover {
    background: #fecaca;
    border-color: #fecaca;
    color: #991B1B;
}
body.ld-unsaved-modal-open {
    overflow: hidden;
}

/* Labels y campos */
.ld-editor-label {
    display: block;
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    color: var(--ld-gray-900);
    margin-bottom: 0.375rem;
}

.ld-editor-label-hint {
    font-weight: 400;
    color: var(--ld-gray-400);
    font-size: var(--ld-font-size-sm);
    display: block;
}

.ld-editor-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    font-size: var(--ld-font-size-control);
    line-height: 1.5;
    color: var(--ld-gray-900);
    background: white;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}
.ld-editor-input:focus {
    outline: none;
    border-color: var(--ld-gray-400);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
    background: white;
}
.ld-editor-input::placeholder {
    color: var(--ld-gray-400);
}
.ld-locked-input-wrap {
    position: relative;
}
.ld-locked-input-wrap .ld-editor-input {
    padding-right: 6rem;
}
.ld-locked-input[readonly] {
    color: var(--ld-gray-700);
    background: var(--ld-gray-50);
    cursor: default;
}
.ld-locked-input-wrap.is-editable .ld-locked-input {
    background: #fff;
}
.ld-locked-input-btn {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    transform: translateY(-50%);
    min-height: 30px;
    padding: 0.25rem 0.65rem;
    font-size: var(--ld-font-size-xs);
}
.ld-ai-field-wrap {
    position: relative;
}
.ld-ai-field-wrap .ld-editor-input {
    padding-right: 7.25rem;
}
.ld-ai-field-wrap--textarea .ld-editor-textarea {
    padding-right: 7.25rem;
}
.ld-ai-field-wrap .ld-ai-inline-field-btn {
    position: absolute;
    top: 50%;
    right: 0.375rem;
    transform: translateY(-50%);
    z-index: 1;
    min-height: 30px;
    padding: 0.25rem 0.65rem;
    font-size: var(--ld-font-size-xs);
    gap: 0.35rem;
    white-space: nowrap;
}
.ld-ai-field-wrap .ld-ai-inline-field-btn svg {
    flex-shrink: 0;
}
.ld-ai-field-wrap .ld-ai-inline-field-btn:hover {
    transform: translateY(-50%);
}
.ld-ai-field-wrap--textarea .ld-ai-inline-field-btn {
    top: 0.5rem;
    right: 0.375rem;
    transform: none;
}
.ld-ai-field-wrap--textarea .ld-ai-inline-field-btn:hover {
    transform: none;
}
.ld-ai-field-wrap--about-text .ld-editor-textarea {
    padding-right: 8.25rem;
}
.ld-ai-field-wrap--about-text .ld-ai-inline-field-btn {
    right: 1.35rem;
}
.ld-editor-textarea {
    resize: vertical;
    min-height: 80px;
}
.ld-editor-textarea.ld-ai-autogrow-textarea {
    overflow: hidden;
    resize: none;
}
.ld-editor-divider {
    height: 1px;
    background: var(--ld-gray-100);
    margin: 1.25rem 0;
}

/* -- Tabs horizontales de secciones (estilo Wix) --------------------------- */
/* -- Editor Sidebar (reemplaza tabs horizontales) ------------------------ */
.ld-editor-sidebar .ld-editor-sidebar-header {
    padding: 1.5rem 1.25rem 1rem;
}

.ld-editor-back-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.435rem 0.75rem;
    border-radius: var(--ld-radius-sm);
    background: transparent;
    color: var(--ld-gray-700);
    text-decoration: none;
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    transition: all 0.15s ease;
    margin-bottom: 0.5rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
}

.ld-editor-back-btn:hover {
    background: var(--ld-gray-100);
    color: var(--ld-gray-900);
}

.ld-editor-back-btn:active {
    background: var(--ld-gray-200);
    color: var(--ld-gray-900);
}

.ld-editor-sidebar .ld-editor-sidebar-top {
    padding: 0.75rem 0.75rem 0;
    flex-shrink: 0;
}

.ld-editor-sidebar .ld-editor-sidebar-top + .ld-sidebar-nav-wrap {
    margin-top: 1.5rem;

}

.ld-editor-sidebar .ld-editor-site-selector {
    padding: 0 0 0.5rem;
}

.ld-editor-sidebar .ld-editor-back-btn {
    margin-bottom: 0;
}

.ld-editor-sidebar .ld-sidebar-nav-wrap {
    flex: 1;
    min-height: 0;
    padding-top: 0;
}

.ld-editor-sidebar .ld-sidebar-nav {
    flex: 1;
    min-height: 0;
    padding-top: 0rem;
    margin-top: 0;
}

.ld-editor-sidebar .ld-sidebar-user {
    flex-shrink: 0;
    margin-top: 0;
}

.ld-editor-sidebar-site {
    padding: 0.75rem 1.25rem 1rem;
    border-bottom: 1px solid var(--ld-border);
    margin-bottom: 0.5rem;
}

.ld-editor-site-name {
    font-weight: 600;
    font-size: var(--ld-font-size-base);
    color: var(--ld-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-editor-site-domain {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-400);
    margin-top: 0.125rem;
}

/* Editor sidebar items ? button reset + same tokens as .ld-nav-item */
.ld-editor-sidebar-item {
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}
.ld-nav-hidden-icon {
    flex-shrink: 0;
    margin-left: auto;
}

.ld-editor-sidebar-item.active {
    background-color: var(--ld-sidebar-active-bg);
    color: var(--ld-sidebar-text-active);
}

.ld-editor-sidebar-item.active svg {
    opacity: 1;
}



.ld-editor-sidebar-actions {
    margin-top: auto;
    padding: 1rem 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid var(--ld-border);
}

/* Legacy: hide horizontal tabs if still present */
.ld-editor-tabs-wrap { display: none; }
.ld-editor-tabs { display: none; }
.ld-editor-tab { display: none; }

/* -- Editor form wrap --------------------------------------------------- */
.ld-editor-form-wrap {
    flex: 1;
    display: flex;
    overflow: hidden;
}

.ld-editor-content {
    flex: 1;
    overflow-y: auto;
    padding: 4rem 2rem 4rem;
}

.ld-editor-panel {
    max-width: 780px;
    margin: 0 auto;
    padding: 0;
}

.ld-editor-app .ld-editor-preview {
    position: relative;
    z-index: calc(var(--ld-z-chat, 9400) + 1);
}
body.ld-sc-open .ld-editor-app .ld-editor-preview {
    z-index: 1;
}
.ld-editor-app .ld-editor-preview-frame-wrap,
.ld-editor-app .ld-editor-preview-iframe {
    position: relative;
    z-index: 1;
}

/* -- Preview Modal ------------------------------------------------------ */
.ld-preview-modal {
    position: fixed;
    inset: 0;
    z-index: var(--ld-z-modal);
    background: rgba(15, 23, 42, 0.45);
    animation: ld-modal-fadein 0.2s ease;
}
@keyframes ld-modal-fadein {
    from { opacity: 0; }
    to { opacity: 1; }
}

.ld-preview-modal-inner {
    position: absolute;
    inset: 12px;
    background: var(--ld-gray-50, #f9fafb);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0,0,0,0.2);
}

.ld-preview-modal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    background: #fff;
    border-bottom: 1px solid var(--ld-border);
    flex-shrink: 0;
}

.ld-preview-modal-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ld-preview-device-btns {
    display: flex;
    gap: 2px;
    background: var(--ld-gray-100, #f3f4f6);
    border-radius: var(--ld-radius-sm, 6px);
    padding: 2px;
}

.ld-preview-device-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: calc(var(--ld-radius-sm, 6px) - 2px);
    color: var(--ld-gray-400);
    cursor: pointer;
    transition: all 0.15s;
}
.ld-preview-device-btn:hover { color: var(--ld-gray-600); }
.ld-preview-device-btn.active {
    background: #fff;
    color: var(--ld-gray-900);
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.ld-preview-modal-title {
    font-size: var(--ld-font-size-xs);
    font-weight: 500;
    color: var(--ld-gray-500);
}

.ld-preview-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--ld-radius-sm, 6px);
    color: var(--ld-gray-500);
    cursor: pointer;
    transition: all 0.15s;
}
.ld-preview-modal-close:hover {
    background: var(--ld-gray-100, #f3f4f6);
    color: var(--ld-gray-900);
}

.ld-preview-modal-body {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: relative;
    overflow: hidden;
    background: var(--ld-gray-100, #f3f4f6);
}

.ld-preview-modal-iframe {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
    transition: width 0.3s ease, margin 0.3s ease, border-radius 0.3s ease;
}

.ld-preview-modal-body.mobile-view {
    align-items: center;
    padding: 1.5rem;
}
.ld-preview-modal-body.mobile-view .ld-preview-modal-iframe {
    width: 375px;
    max-width: 100%;
    height: 100%;
    border-radius: 24px;
    box-shadow: 0 4px 32px rgba(0,0,0,0.1);
}

/* Skeleton inside modal */
.ld-preview-modal .ld-preview-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 3rem 2rem;
    background: var(--ld-gray-50, #f9fafb);
    z-index: 2;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.25s ease;
}
.ld-preview-modal .ld-preview-skeleton.ld-skeleton-hidden {
    opacity: 0;
    pointer-events: none;
}
.ld-preview-modal .ld-preview-skeleton .ld-ps-inner {
    width: 100%;
    max-width: 900px;
}

/* Skeleton shared styles */
.ld-sk {
    background: var(--ld-gray-200, #e5e7eb);
    border-radius: 4px;
    animation: ld-skeleton-pulse 1.5s ease-in-out infinite;
}
.ld-ps-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--ld-gray-100, #f3f4f6); }
.ld-ps-logo { width: 80px; height: 14px; }
.ld-ps-nav-links { display: flex; gap: 0.75rem; }
.ld-ps-link { width: 56px; height: 10px; }
.ld-ps-hero { margin-bottom: 2rem; }
.ld-ps-hero-title { height: 18px; width: 75%; margin-bottom: 0.75rem; }
.ld-ps-hero-sub { height: 10px; width: 85%; margin-bottom: 0.5rem; }
.ld-ps-hero-btn { height: 28px; width: 100px; margin-top: 0.75rem; border-radius: 6px; }
.ld-ps-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.ld-ps-card { height: 80px; border-radius: 8px; }

@media (max-width: 1024px) {
    .ld-preview-modal-inner { inset: 0; border-radius: 0; }
    .ld-preview-modal-body.mobile-view { padding: 0.5rem; }
}

/* -- Encabezado de cada secci?n ------------------------------------------- */
.ld-editor-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
}
.ld-editor-section-title {
    font-size: var(--ld-font-size-xl);
    font-weight: 700;
    color: var(--ld-gray-900);
    margin: 0;
    letter-spacing: -0.01em;
}
.ld-editor-section-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--ld-font-size-control);
    color: var(--ld-gray-500);
    cursor: pointer;
    user-select: none;
}
.ld-editor-section-toggle input[type="checkbox"] {
    display: none;
}
.ld-toggle-track {
    position: relative;
    width: 36px;
    height: 20px;
    background: var(--ld-gray-300);
    border-radius: 999px;
    transition: background 0.2s;
    flex-shrink: 0;
}
.ld-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    transition: transform 0.2s;
}
.ld-editor-section-toggle input[type="checkbox"]:checked ~ .ld-toggle-track {
    background: var(--ld-primary);
}
.ld-editor-section-toggle input[type="checkbox"]:checked ~ .ld-toggle-track::after {
    transform: translateX(16px);
}

@media (max-width: 640px) {
    .section-panel > .ld-editor-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.55rem;
    }
    .section-panel > .ld-editor-section-header > .ld-editor-section-toggle {
        order: -1;
        flex-direction: row;
        align-items: center;
        gap: 0.5rem;
    }
    .section-panel > .ld-editor-section-header > .ld-editor-section-toggle .ld-toggle-track {
        order: -1;
    }
}

/* -- Grupos de campos ----------------------------------------------------- */
.ld-editor-fields {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.ld-editor-field-group {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.ld-editor-field-group .ld-editor-input { flex: 1; }

/* -- Panel de Dise?o: variantes, paleta, reorden ------------------------- */
/* -- Variant cards with iframe preview ------------------------------------- */
.ld-variant-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
}
.ld-variant-card {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    background: white;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    overflow: hidden;
    padding: 0;
    text-align: left;
}
.ld-variant-card:hover {
    border-color: var(--ld-gray-300);
}
.ld-variant-card--active,
.ld-variant-card--active:hover {
    border-color: var(--ld-gray-400);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.ld-variant-frame-wrap {
    position: relative;
    width: 100%;
    height: 110px;
    overflow: hidden;
    background: var(--ld-gray-50);
    border-bottom: 1px solid var(--ld-border);
}
.ld-variant-frame-loading {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: #fff;
}
.ld-variant-frame-skeleton {
    width: 100%;
    height: 100%;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-sizing: border-box;
}
.ld-variant-sk-header {
    height: 8px;
    width: 42%;
    border-radius: 3px;
}
.ld-variant-sk-hero {
    flex: 1;
    min-height: 38px;
    border-radius: 4px;
}
.ld-variant-sk-row {
    display: flex;
    gap: 4px;
    height: 16px;
    flex-shrink: 0;
}
.ld-variant-sk-block {
    flex: 1;
    height: 100%;
    border-radius: 3px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ld-variant-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 1280px;
    height: 900px;
    transform: scale(0.155);
    transform-origin: top left;
    border: none;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
}
.ld-variant-card-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: var(--ld-font-size-xs);
    font-weight: 500;
    color: var(--ld-gray-700);
}
.ld-variant-card--active .ld-variant-card-label {
    color: var(--ld-gray-900);
    font-weight: 600;
}
.ld-variant-card-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--ld-primary, #6366F1);
}
.ld-variant-checkmark {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ld-primary, #6366F1);
    color: #fff;
    flex-shrink: 0;
}

/* -- Variant pills (legacy, kept for compatibility) ------------------------- */
.ld-variant-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--ld-radius-lg);
    border: 2px solid var(--ld-border);
    background: white;
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    color: var(--ld-text);
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ld-variant-pill:hover {
    border-color: var(--pill-color, var(--ld-accent));
}
.ld-variant-pill--active {
    border-color: var(--pill-color, var(--ld-accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pill-color, var(--ld-accent)) 20%, transparent);
}
.ld-variant-pill-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Editor color picker — onboarding-style grid + tone modal */
.ld-editor-colors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}
@media (min-width: 640px) {
    .ld-editor-colors-grid { grid-template-columns: repeat(4, 1fr); }
}

.ld-editor-color-card {
    position: relative;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background: #fff;
    padding: 0;
    text-align: left;
    width: 100%;
}
.ld-editor-color-card:hover:not(.ld-editor-color-card--selected) {
    border-color: var(--ld-gray-300);
}
.ld-editor-color-card--selected {
    border-color: var(--ld-gray-400);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.ld-editor-color-dot {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2.5px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
    flex-shrink: 0;
    pointer-events: none;
}
.ld-editor-color-card .ld-editor-color-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 1;
}
.ld-editor-color-card--selected .ld-editor-color-dot,
.ld-color-tone-option--selected .ld-editor-color-dot {
    display: block;
}

.ld-logo-ai-option {
    position: relative;
    cursor: pointer;
    border: 2px solid var(--ld-gray-200);
    border-radius: var(--ld-radius-md);
    padding: 0.5rem;
    background: var(--ld-gray-50);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}
.ld-logo-ai-option:hover {
    border-color: var(--ld-primary);
}
.ld-logo-ai-option--selected,
.ld-logo-ai-option--selected:hover {
    border-color: var(--ld-primary);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}
.ld-logo-ai-option .ld-editor-color-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--ld-primary);
}
.ld-logo-ai-option--selected .ld-editor-color-dot {
    display: block;
}

.ld-editor-color-swatch {
    height: 56px;
    width: 100%;
}
.ld-editor-color-name {
    padding: 0.625rem;
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    color: var(--ld-gray-600);
    text-align: center;
}

.ld-color-tone-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--ld-z-modal);
    padding: 1rem;
}
.ld-color-tone-overlay[hidden] { display: none !important; }

.ld-color-tone-modal {
    background: #fff;
    border-radius: var(--ld-radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 420px;
    max-height: min(90vh, 560px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalSlideIn 0.2s ease-out;
}

.ld-color-tone-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--ld-border);
}
.ld-color-tone-modal-title {
    margin: 0;
    font-size: var(--ld-font-size-lg);
    font-weight: 600;
    color: var(--ld-gray-900);
}
.ld-color-tone-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--ld-radius-sm);
    color: var(--ld-gray-500);
    cursor: pointer;
}
.ld-color-tone-close:hover { background: var(--ld-gray-100); color: var(--ld-gray-800); }

.ld-color-tone-modal-desc {
    margin: 0;
    padding: 0.75rem 1.25rem 0;
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-500);
}

.ld-color-tone-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    overflow-y: auto;
    flex: 1;
}

.ld-color-tone-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    background: #fff;
    cursor: pointer;
    overflow: hidden;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ld-color-tone-option:hover:not(.ld-color-tone-option--selected) {
    border-color: var(--ld-gray-300);
}
.ld-color-tone-option--selected {
    border-color: var(--ld-gray-400);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.ld-color-tone-swatch {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}
.ld-color-tone-option-name {
    flex: 1;
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    color: var(--ld-gray-800);
}
.ld-color-tone-option .ld-editor-color-dot {
    margin-right: 0.75rem;
}

.ld-color-tone-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--ld-border);
}

@media (max-width: 640px) {
    .ld-color-tone-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .ld-color-tone-modal {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
    }
}

/* Modal: crear textos con IA */
.ld-text-ai-modal {
    max-width: 480px;
    animation: modalSlideIn 0.2s ease-out;
}
.ld-text-ai-modal #ld-text-ai-desc {
    padding-bottom: 1rem;
    line-height: 1.55;
}
.ld-text-ai-results-desc {
    margin-bottom: 0.75rem !important;
    padding-bottom: 0 !important;
}
.ld-text-ai-loading {
    padding: 0 1.25rem 1.25rem;
}
.ld-text-ai-skeleton-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.ld-text-ai-skeleton-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    background: #fff;
}
.ld-text-ai-sk-dot {
    width: 16px;
    height: 16px;
    margin-top: 0.125rem;
    border-radius: 50%;
    flex-shrink: 0;
}
.ld-text-ai-sk-line {
    flex: 1;
    height: 14px;
    border-radius: 4px;
    margin-top: 0.125rem;
}
.ld-text-ai-sk-line--short {
    width: 72%;
    flex: none;
}
.ld-text-ai-loading-text {
    margin: 0.875rem 0 0;
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-500);
    text-align: center;
}
.ld-text-ai-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 1.25rem 0.25rem;
    overflow-y: auto;
    max-height: min(50vh, 360px);
}
.ld-text-ai-option {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ld-text-ai-option:hover:not(.ld-text-ai-option--selected) {
    border-color: var(--ld-gray-300);
}
.ld-text-ai-option--selected {
    border-color: var(--ld-gray-400);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
.ld-text-ai-option-dot {
    width: 16px;
    height: 16px;
    margin-top: 0.125rem;
    border-radius: 50%;
    border: 2px solid var(--ld-border);
    flex-shrink: 0;
    position: relative;
    transition: border-color 0.15s;
}
.ld-text-ai-option-dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--ld-primary);
    opacity: 0;
    transition: opacity 0.15s;
}
.ld-text-ai-option--selected .ld-text-ai-option-dot {
    border-color: var(--ld-primary);
}
.ld-text-ai-option--selected .ld-text-ai-option-dot::after {
    opacity: 1;
}
.ld-text-ai-option-text {
    flex: 1;
    font-size: var(--ld-font-size-sm);
    line-height: 1.5;
    color: var(--ld-gray-800);
    white-space: pre-wrap;
}
.ld-text-ai-error {
    margin: 0;
    padding: 0.75rem 1.25rem 1rem;
    font-size: var(--ld-font-size-sm);
    color: #dc2626;
    background: #fef2f2;
    border-top: 1px solid #fecaca;
    border-bottom: 1px solid #fecaca;
}
.ld-text-ai-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}
.ld-text-ai-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}
.ld-text-ai-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-shrink: 0;
}
.ld-text-ai-usage {
    font-size: 0.6875rem;
    color: var(--ld-gray-400);
    line-height: 1.2;
    cursor: help;
    flex-shrink: 0;
}
.ld-text-ai-usage .ld-tooltip {
    max-width: 200px;
    text-align: center;
}

/* Legacy palette grid (unused) */
.ld-palette-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
}
@media (min-width: 480px) {
    .ld-palette-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 640px) {
    .ld-palette-grid { grid-template-columns: repeat(4, 1fr); }
}

.ld-palette-card {
    background: #fff;
    border: 1.5px solid var(--ld-border);
    border-radius: var(--ld-radius-lg);
    overflow: hidden;
    transition: border-color 0.15s;
}
.ld-palette-card--active {
    border-color: var(--ld-gray-400);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}

.ld-palette-preview {
    height: 40px;
    width: 100%;
}

.ld-palette-info {
    padding: 0.5rem 0.625rem;
}

.ld-palette-family {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--ld-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
}

.ld-palette-swatches {
    display: flex;
    gap: 0.3rem;
}

.ld-color-swatch {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
    position: relative;
}
.ld-color-swatch:hover {
    transform: scale(1.15);
    z-index: 1;
}
.ld-color-swatch--active {
    border-color: var(--ld-text);
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--ld-text);
}
.ld-sortable-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.625rem;
    background: var(--ld-gray-50);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    font-size: var(--ld-font-size-sm);
    color: var(--ld-text);
    user-select: none;
}
.ld-sortable-item.sortable-ghost {
    opacity: 0.4;
}
.ld-sortable-handle {
    cursor: grab;
    color: var(--ld-gray-400);
    display: flex;
    align-items: center;
}
.ld-sortable-handle:active { cursor: grabbing; }
.ld-sortable-label {
    font-weight: 500;
}
.ld-sortable-hidden-icon {
    display: inline-flex;
    align-items: center;
    color: var(--ld-gray-400);
    flex-shrink: 0;
    margin-right: 0.5rem;
}
.ld-sortable-hidden-icon svg {
    width: 16px;
    height: 16px;
}
.ld-sortable-item-actions {
    flex-shrink: 0;
}
.ld-sortable-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: var(--ld-radius-sm);
    border: 1px solid var(--ld-border);
    background: white;
    color: var(--ld-gray-500);
    cursor: pointer;
    transition: background 0.12s;
}
.ld-sortable-arrow:hover {
    background: var(--ld-gray-100);
    color: var(--ld-text);
}

/* -- Tarjeta de ítem (servicio, FAQ, etc.) -------------------------------- */
.ld-editor-item-block {
    margin-bottom: 1.125rem;
}
.ld-editor-item-block:last-child {
    margin-bottom: 0.625rem;
}
.ld-editor-item-block-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.375rem;
    padding: 0 0.125rem;
    min-height: 1.5rem;
}
.ld-editor-item-index {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ld-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

.ld-editor-item-card {
    background: white;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-lg);
    padding: 1.5rem;
    margin-bottom: 0;
}
.ld-editor-item-card .ld-editor-fields {
    gap: 1.5rem;
}
.ld-editor-item-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.875rem;
}
.ld-editor-item-card-title {
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    color: var(--ld-gray-700);
    margin: 0;
}

/* -- Tooltip gen?rico reutilizable ---------------------------------------- */
.ld-tooltip-trigger {
    position: relative;
}
.ld-tooltip {
    position: absolute;
    background: var(--ld-gray-900);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.3;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: 100;
}
.ld-tooltip--below {
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
}
.ld-tooltip--below::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: var(--ld-gray-900);
}
.ld-tooltip--above {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    white-space: normal;
    max-width: 200px;
    text-align: center;
    width: max-content;
}
.ld-tooltip--above::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--ld-gray-900);
}
.ld-tooltip-trigger:hover .ld-tooltip {
    opacity: 1;
    visibility: visible;
}

/* -- Bot?n sugerencias IA ------------------------------------------------- */
.ld-ai-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--ld-radius-md);
    border: none;
    background: var(--ld-gray-100);
    color: var(--ld-gray-500);
    cursor: pointer;
    transition: all 0.12s;
    flex-shrink: 0;
    font-size: 1rem;
}
.ld-ai-btn:hover {
    background: var(--ld-gray-200);
    color: var(--ld-gray-700);
}

/* -- Bot?n regenerar secci?n (Pro) ---------------------------------------- */
.ld-regen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.625rem 1rem;
    background: var(--ld-gray-50);
    color: var(--ld-gray-600);
    border: none;
    border-radius: var(--ld-radius-md);
    font-size: var(--ld-font-size-xs);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
}
.ld-regen-btn:hover {
    background: var(--ld-gray-100);
    color: var(--ld-gray-800);
}
.ld-regen-btn svg { width: 14px; height: 14px; }

/* -- Botón "agregar ítem" en el editor (secondary, ancho auto) ------------ */
.ld-editor-add-btn {
    align-self: flex-start;
    font-weight: 600;
    margin-top: 0.75rem;
}

.ld-editor-add-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* -- Botón IA junto a upload (secondary, mismo tamaño que toolbar del catálogo) */
.ld-editor-ai-btn {
    margin-top: 0.75rem;
    white-space: nowrap;
}

.ld-editor-ai-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.ld-editor-ai-btn:disabled {
    opacity: 0.6;
}

/* -- Bot?n eliminar ------------------------------------------------------- */
.ld-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-400);
    padding: 0.25rem 0.5rem;
    border-radius: var(--ld-radius-sm);
    transition: all 0.12s;
}
.ld-remove-btn:hover { color: #ef4444; background: #fef2f2; }

/* -- Upload area ---------------------------------------------------------- */
.ld-upload-area,
.ld-editor-upload-area {
    border: 2px dashed var(--ld-gray-300);
    border-radius: 10px;
    padding: 2rem 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
}
.ld-upload-area:hover,
.ld-editor-upload-area:hover {
    border-color: var(--ld-gray-400);
    background: #fff;
}
.ld-upload-icon,
.ld-upload-area svg,
.ld-editor-upload-icon {
    width: 32px;
    height: 32px;
    color: var(--ld-gray-900);
    margin: 0 0 0.25rem;
    display: block;
    flex-shrink: 0;
}
.ld-upload-area-title,
.ld-editor-upload-title {
    color: var(--ld-gray-900);
    font-weight: 400;
    font-size: var(--ld-font-size-sm);
    line-height: 1.5;
    margin: 0;
}
.ld-upload-area-hint,
.ld-editor-upload-hint {
    color: var(--ld-gray-500);
    font-size: var(--ld-font-size-xs);
    line-height: 1.4;
    margin: 0;
}

/* -- Badges de confianza -------------------------------------------------- */
.ld-badge-check {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.625rem;
    background: var(--ld-gray-50);
    border: 2px solid transparent;
    border-radius: var(--ld-radius-md);
    cursor: pointer;
    transition: all 0.12s;
    font-size: var(--ld-font-size-xs);
}
.ld-badge-check:hover { background: var(--ld-gray-100); }
.ld-badge-check.active { background: var(--ld-accent-50); border-color: var(--ld-accent); }
.ld-badge-check input { accent-color: var(--ld-accent); width: 0.875rem; height: 0.875rem; }

/* -- Banner de info (testimonios, SEO, etc.) ------------------------------ */
.ld-info-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    background: var(--ld-gray-50);
    border-radius: var(--ld-radius-md);
    margin-bottom: 1.25rem;
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-600);
}
.ld-info-banner svg { width: 18px; height: 18px; flex-shrink: 0; }
.ld-info-banner.success { background: var(--ld-success-surface); color: var(--ld-success-text); }
.ld-info-banner.warning { background: #fffbeb; color: #92400e; }

/* -- Horarios por d?a ----------------------------------------------------- */
.ld-day-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: var(--ld-gray-50);
    border-radius: var(--ld-radius-sm);
}
.ld-day-row.is-closed { background: #fef2f2; }
.ld-day-row.is-24h   { background: var(--ld-success-surface); }

/* -- SEO preview ---------------------------------------------------------- */
.ld-seo-preview {
    padding: 1rem;
    background: var(--ld-gray-50);
    border-radius: var(--ld-radius-md);
}

/* -- Pro badge ------------------------------------------------------------ */
.ld-pro-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--ld-radius-sm);
    font-size: var(--ld-font-size-micro);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: var(--ld-gray-900);
    color: #fff;
}

/* -- Header de app (editor + páginas normales) ---------------------------- */
.ld-editor-header {
    background: var(--ld-chrome-bg);
    border-bottom: 1px solid #ececec;
    padding: 0.625rem 1.5rem;
    position: fixed;
    top: 0;
    left: var(--ld-sidebar-width);
    right: 0;
    z-index: var(--ld-z-sticky);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--ld-app-header-height);
    box-sizing: border-box;
    transition: left 0.25s ease;
    padding-left: .25rem;
    min-height: 54px;
}
.ld-editor-header + *:not(.ld-mobile-nav) {
    margin-top: var(--ld-app-header-height);
}
.ld-universal-header ~ .ld-content {
    margin-top: var(--ld-app-header-height);
    padding: 56px 72px 24px;
}
.ld-content--no-appheader {
    margin-top: 0 !important;
}

/* -- Mobile nav pills (quick access, visible <=1024px) --------------------- */
:root {
    --ld-mobile-nav-height: 2.5rem;
}
.ld-mobile-nav {
    display: none;
    position: fixed;
    top: var(--ld-app-header-height);
    left: 0;
    right: 0;
    z-index: calc(var(--ld-z-sticky) - 1);
    margin-top: 0;
    background: var(--ld-page-bg);
    border-bottom: 1px solid var(--ld-border);
    padding: 0.375rem 0.75rem 0.4rem;
    overflow-x: auto;
    gap: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}
.ld-mobile-nav::-webkit-scrollbar {
    display: none;
}
.ld-mobile-nav-pill {
    white-space: nowrap;
    padding: 0.35rem 0.85rem;
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    border-radius: calc(var(--ld-radius-sm) - 2px);
    border: none;
    background: transparent;
    color: var(--ld-gray-500);
    text-decoration: none;
    flex-shrink: 0;
    scroll-snap-align: start;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.25;
    box-shadow: none;
}
button.ld-mobile-nav-pill {
    display: inline-block;
}
.ld-mobile-nav-pill:hover:not(.active) {
    background: transparent;
    color: var(--ld-gray-800);
}
.ld-mobile-nav-pill.active {
    background: #fff;
    color: var(--ld-gray-900);
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0,0,0,0.07);
    border: 1px solid var(--ld-border);
    border-radius: calc(var(--ld-radius-sm) - 2px);
}

/* Editor section tabs: compact mobile rail with underlined active state */
.ld-mobile-nav--editor {
    position: sticky;
    top: 0;
    left: auto;
    right: auto;
    z-index: 10;
    margin: 0 -2rem 1rem;
    padding: 0 1rem;
    background: var(--ld-page-bg);
    border-bottom: 1px solid var(--ld-border);
    gap: 0.875rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
}

/* Segmented-control look: inherit from .ld-help-filters pattern */
.ld-mobile-nav--editor::before {
    content: '';
    display: none; /* keep handle pseudo stripped for non-mobile */
}

.ld-mobile-nav--editor::after {
    content: '';
    position: sticky;
    right: -1rem;
    align-self: stretch;
    flex: 0 0 36px;
    margin-left: -36px;
    background: linear-gradient(90deg, rgba(250, 250, 250, 0), var(--ld-page-bg) 72%);
    pointer-events: none;
}

.ld-mobile-nav--editor .ld-mobile-nav-pill {
    position: relative;
    margin-right: 0;
    padding: 0.75rem 0 0.7rem;
    border: 0;
    border-radius: 0;
    font-size: var(--ld-font-size-xs);
    font-weight: 500;
    background: transparent;
    color: var(--ld-gray-500);
    min-height: 0;
}

.ld-mobile-nav--editor .ld-mobile-nav-pill.active {
    background: transparent;
    border-color: transparent;
    color: var(--ld-primary);
    font-weight: 650;
    box-shadow: none;
}

.ld-mobile-nav--editor .ld-mobile-nav-pill.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: var(--ld-primary);
}

.ld-upload-mobile-label {
    display: none;
}

@media (max-width: 768px) {
    .ld-upload-desktop-label {
        display: none;
    }

    .ld-upload-mobile-label {
        display: inline;
    }

    .ld-reseller-modal {
        align-items: flex-end;
        padding: 0;
    }

    .ld-reseller-modal-content {
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
        animation: ld-sheet-slide-up 0.3s ease;
    }

    .ld-reseller-modal-content::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--ld-gray-300);
        border-radius: 2px;
        margin: 0 auto 0.75rem;
    }

    .ld-reseller-modal-close {
        min-width: 44px;
        min-height: 44px;
    }

    .ld-billing-table-wrap,
    .ld-invoices-table {
        overflow-x: auto;
        max-width: 100%;
    }
}

.ld-empty-state-cta .ld-seo-empty-upsell {
    margin-top: 1rem;
}

/* -- App header ? secci?n + tooltip (p?ginas no-editor) ------------------- */
.ld-app-header-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ld-app-header-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ld-gray-900);
}
.ld-app-header-help {
    position: relative;
    display: flex;
    align-items: center;
}
.ld-app-header-help-btn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--ld-gray-200);
    color: var(--ld-gray-500);
    font-size: 0.625rem;
    font-weight: 600;
    border: none;
    cursor: help;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.12s, color 0.12s;
    padding: 0;
    flex-shrink: 0;
}
.ld-app-header-help-btn:hover,
.ld-app-header-help-btn:focus {
  
    outline: none;
}
.ld-app-header-tooltip {
    position: absolute;
    top: calc(100% + 12px);
    left: -6px;
    transform: none;
    background: var(--ld-gray-900);
    color: #fff;
    font-size: var(--ld-font-size-muted);
    font-weight: 400;
    line-height: 1.4;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    width: 220px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    z-index: var(--ld-z-dropdown);
    white-space: normal;
    text-align: left;
}
.ld-app-header-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 10px;
    transform: none;
    border: 6px solid transparent;
    border-bottom-color: var(--ld-gray-900);
}
.ld-app-header-help:hover .ld-app-header-tooltip,
.ld-app-header-help-btn:focus + .ld-app-header-tooltip {
    opacity: 1;
    visibility: visible;
}
.ld-editor-header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}
.ld-editor-header-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--ld-radius-md);
    background: var(--ld-gray-50);
    color: var(--ld-gray-500);
    text-decoration: none;
    transition: background 0.12s;
    flex-shrink: 0;
}
.ld-editor-header-back:hover { background: var(--ld-gray-100); color: var(--ld-gray-700); }
.ld-editor-header-back svg { width: 14px; height: 14px; }
.ld-editor-header-sep { width: 1px; height: 20px; background: var(--ld-gray-100); flex-shrink: 0; }
.ld-editor-header-name {
    font-size: var(--ld-font-size-sm);
    font-weight: 600;
    color: var(--ld-gray-900);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ld-editor-header-domain {
    font-size: var(--ld-font-size-micro);
    color: var(--ld-gray-400);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ld-plan-tag {
    padding: 0.2rem 0.5rem;
    border-radius: var(--ld-radius-sm);
    font-size: var(--ld-font-size-micro);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    flex-shrink: 0;
}
.ld-plan-tag.pro { background: var(--ld-gray-900); color: #fff; }
.ld-plan-tag.basic, .ld-plan-tag.starter { background: var(--ld-gray-100); color: var(--ld-gray-500); }
.ld-plan-tag.agency { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }

/* -- Command Palette trigger button --------------------------------------- */
.ld-cmd-trigger {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5625rem 1rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    background: #fff;
    color: var(--ld-gray-400);
    font-size: var(--ld-font-size-muted);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
    flex: 1;
    max-width: 520px;
    min-width: 160px;
    margin-left: 2px;
    overflow: hidden;
}
.ld-cmd-trigger:hover {
    border-color: var(--ld-gray-300);
    background: var(--ld-gray-100);
    color: var(--ld-gray-500);
}
.ld-cmd-trigger-text {
    color: var(--ld-gray-400);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Command Palette modal ------------------------------------------------ */
.ld-cmd-overlay {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    z-index: var(--ld-z-command);
    background: rgba(15, 23, 42, 0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: max(7vh, calc(var(--ld-mobile-safe-top) + 1rem));
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    animation: ldCmdFadeIn 0.12s ease-out;
    margin-top: 0 !important;
}
@keyframes ldCmdFadeIn { from { opacity: 0; } to { opacity: 1; } }
.ld-cmd-modal {
    background: #fff;
    border-radius: var(--ld-radius-lg, 12px);
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 560px;
    overflow: hidden;
    animation: ldCmdSlideUp 0.15s ease-out;
}
@keyframes ldCmdSlideUp { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.ld-cmd-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ld-border);
}
.ld-cmd-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--ld-font-size-control);
    color: var(--ld-gray-900);
    background: transparent;
    padding: 0;
}
.ld-cmd-input::placeholder { color: var(--ld-gray-400); }
.ld-cmd-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--ld-radius-sm);
    background: none;
    color: var(--ld-gray-400);
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.1s, color 0.1s;
    padding: 0;
}
.ld-cmd-close:hover {
    background: var(--ld-gray-100);
    color: var(--ld-gray-600);
}
.ld-cmd-list {
    max-height: min(520px, calc(100dvh - 8rem));
    overflow-y: auto;
    padding: 0.375rem 0;
}
.ld-cmd-group {
    padding: 0.5rem 1rem 0.25rem;
    font-size: var(--ld-font-size-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ld-gray-400);
}
.ld-cmd-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: 100%;
    padding: 0.625rem 1rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: var(--ld-font-size-control);
    color: var(--ld-gray-700);
    text-align: left;
    transition: background 0.08s;
}
.ld-cmd-item:hover, .ld-cmd-item-active {
    background: var(--ld-gray-50);
}
.ld-cmd-item-active {
    background: var(--ld-primary, #6366f1) !important;
    color: #fff;
}
.ld-cmd-item-label { font-weight: 500; line-height: 1.3; }
.ld-cmd-item-copy {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}
.ld-cmd-item-meta {
    font-size: var(--ld-font-size-xs);
    font-weight: 400;
    color: var(--ld-gray-400);
    line-height: 1.25;
}
.ld-cmd-item-active .ld-cmd-item-meta { color: rgba(255, 255, 255, 0.78); }
.ld-cmd-item--sub {
    padding-left: 1rem;
}
.ld-cmd-item-sub {
    font-weight: 400;
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-500);
    padding-left: 0.875rem;
    position: relative;
}
.ld-cmd-item-sub::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--ld-gray-300);
    font-weight: 300;
    font-size: var(--ld-font-size-muted);
}
.ld-cmd-item-active .ld-cmd-item-sub { color: #fff; }
.ld-cmd-item-active .ld-cmd-item-sub::before { color: rgba(255,255,255,0.6); }
/* Leading icon (only in the initial "Ir a" state) */
.ld-cmd-item-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    color: var(--ld-gray-500);
    flex-shrink: 0;
}
.ld-cmd-item-ico svg { width: 20px; height: 20px; }
.ld-cmd-item--primary { padding-top: 0.6875rem; padding-bottom: 0.6875rem; }
.ld-cmd-item-active .ld-cmd-item-ico {
    color: #fff;
}
/* Trailing "Ir a ›" hint on the right */
.ld-cmd-item-go {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    color: var(--ld-gray-500);
    font-size: var(--ld-font-size-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ld-cmd-item-go-text {
    opacity: 0;
    transition: opacity 0.1s;
}
.ld-cmd-item:hover .ld-cmd-item-go-text,
.ld-cmd-item-active .ld-cmd-item-go-text { opacity: 1; }
.ld-cmd-item:hover .ld-cmd-item-go { color: var(--ld-gray-700); }
.ld-cmd-item-go-arrow {
    font-size: var(--ld-font-size-control);
    line-height: 1;
}
.ld-cmd-item-active .ld-cmd-item-go { color: rgba(255, 255, 255, 0.92); }
.ld-cmd-initial-hint {
    margin: 0.5rem 1rem 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--ld-radius-sm);
    background: var(--ld-gray-100);
    color: var(--ld-gray-600);
    font-size: var(--ld-font-size-muted);
    line-height: 1.45;
    text-align: center;
}
.ld-cmd-skeleton-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.6875rem 1rem;
    width: 100%;
    box-sizing: border-box;
}
.ld-cmd-skeleton-row span {
    display: block;
    height: 0.875rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ld-gray-200), var(--ld-gray-100), var(--ld-gray-200));
    background-size: 200% 100%;
    animation: ldCmdSkeleton 1s linear infinite;
}
.ld-cmd-skeleton-row span:first-child {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 1.25rem;
}
.ld-cmd-skeleton-row span:last-child {
    flex: 1;
    max-width: none;
}
@keyframes ldCmdSkeleton {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}
.ld-cmd-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ld-gray-400);
    font-size: var(--ld-font-size-muted);
}

/* -- User avatar & dropdown ----------------------------------------------- */
.ld-user-dropdown-wrap {
    position: relative;
}
.ld-user-avatar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--ld-border);
    background: var(--ld-gray-100);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
    transition: border-color 0.15s;
}
.ld-user-avatar-btn:hover { border-color: var(--ld-gray-300); }
.ld-user-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.ld-user-avatar-initials {
    font-size: var(--ld-font-size-micro);
    font-weight: 600;
    color: var(--ld-gray-500);
    line-height: 1;
}
.ld-user-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md, 8px);
    box-shadow: 0 14px 36px -6px rgba(0, 0, 0, 0.16), 0 8px 18px -8px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    z-index: var(--ld-z-dropdown);
    overflow: hidden;
    animation: ldDropdownIn 0.12s ease-out;
}
@keyframes ldDropdownIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.ld-user-dropdown.ld-user-dropdown--up {
    top: auto;
    bottom: calc(100% + 8px);
    left: 0;
    right: auto;
    z-index: var(--ld-z-dropdown);
    animation: ldDropdownUpIn 0.12s ease-out;
}
@keyframes ldDropdownUpIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}
.ld-user-dropdown-header {
    padding: 0.875rem 1rem 0.75rem;
}
.ld-user-dropdown-name {
    font-size: var(--ld-font-size-control);
    font-weight: 600;
    color: var(--ld-gray-900);
    line-height: 1.35;
}
.ld-user-dropdown-email {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-400);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ld-user-dropdown-divider {
    height: 1px;
    background: var(--ld-border);
}
.ld-user-dropdown-body {
    padding: 10px;
}
.ld-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    font-size: var(--ld-font-size-muted);
    color: var(--ld-gray-600);
    text-decoration: none;
    transition: background 0.08s, color 0.08s;
    cursor: pointer;
    border-radius: var(--ld-radius-sm);
}
.ld-user-dropdown-item:hover {
    background: var(--ld-sidebar-active-bg);
    color: var(--ld-sidebar-text-active);
}

/* -- Responsive: Command Palette & User Avatar ----------------------------- */
@media (max-width: 768px) {
    .ld-cmd-trigger {
        max-width: none;
    }
    .ld-cmd-overlay { padding-top: max(3vh, calc(var(--ld-mobile-safe-top) + 0.75rem)); }
    .ld-cmd-modal { max-width: calc(100% - 2rem); margin: 0 1rem; }
    .ld-cmd-list { max-height: min(520px, calc(100dvh - 7rem)); }
}
@media (max-width: 480px) {
    .ld-cmd-trigger {
        padding: 0.5rem 0.625rem;
        flex: 1;
        min-width: 0;
    }
}

/* -- Icon picker modal ---------------------------------------------------- */
.ld-icon-cat-btn {
    padding: 0.3rem 0.625rem;
    border-radius: 9999px;
    font-size: var(--ld-font-size-xs);
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: var(--ld-gray-100);
    color: var(--ld-gray-600);
    transition: all 0.12s;
}
.ld-icon-cat-btn.active { background: var(--ld-gray-900); color: #fff; }

/* -- Rese?as de testimonios ----------------------------------------------- */
.ld-review-card {
    padding: 0.75rem;
    background: var(--ld-gray-50);
    border-radius: var(--ld-radius-md);
}

/* -- Selector de estilo Pro ----------------------------------------------- */
.ld-style-btn {
    padding: 0.75rem;
    border: 2px solid transparent;
    border-radius: var(--ld-radius-md);
    text-align: center;
    cursor: pointer;
    background: var(--ld-gray-50);
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    color: var(--ld-gray-700);
    transition: all 0.12s;
}
.ld-style-btn:hover { background: var(--ld-gray-100); }
.ld-style-btn.active,
.ld-style-btn--active,
.ld-style-btn.is-active { border-color: var(--ld-accent); background: var(--ld-accent-50); color: var(--ld-accent); }

/* -- Panel de secci?n (tab mode: one visible at a time) ------------------- */
.section-panel {
    padding: 0;
    border-bottom: none;
    display: none;
}
.section-panel .ld-editor-section-header {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
}

.ld-section-disabled-msg {
    display: none;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 1rem;
    padding: 2rem;
    background: white;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
}

/* Hide section content when disabled - doesn't interfere with tab states */
.section-panel.ld-section-content-hidden > *:not(.ld-editor-section-header):not(.ld-editor-section-desc):not(.ld-section-disabled-msg) {
    display: none !important;
}

.section-panel.ld-section-content-hidden > .ld-section-disabled-msg {
    display: flex;
}

.ld-google-reviews-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex-wrap: wrap;
}
.ld-google-reviews-toggle {
    margin: 0;
    flex-shrink: 0;
}

.ld-testimonial-rating {
    margin-top: 0.5rem;
}
.ld-testimonial-rating .ld-editor-label {
    margin-bottom: 0.125rem;
}
.ld-testimonial-rating .ld-testimonial-stars {
    margin-bottom: 0.75rem;
}

.ld-google-reviews-body.ld-google-reviews-disabled > *:not(.ld-section-disabled-msg) {
    display: none !important;
}

.ld-google-reviews-body.ld-google-reviews-disabled > .ld-section-disabled-msg {
    display: flex;
}
.section-panel .ld-editor-section-desc {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-500);
    margin: 0 0 1.25rem;
    line-height: 1.5;
    max-width: 520px;
}
.section-panel .ld-editor-section-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ld-gray-900);
    letter-spacing: -0.025em;
}
.section-panel .ld-editor-fields {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

/* -- Sub-cards dentro de secciones --------------------------------------- */
.ld-editor-card {
    background: white;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-lg);
    padding: 1.5rem;
    margin-bottom: 0.5rem;
}
.ld-editor-card-header {
    margin-bottom: 1rem;
}
.ld-editor-card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ld-gray-900);
    margin: 1.5rem 0 0.75rem 0;
}
.ld-editor-card-title--with-help {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.section-panel > .ld-editor-card-title:first-of-type,
.section-panel > .ld-editor-section-header + .ld-editor-card-title {
    margin-top: 0;
}
.ld-editor-card-desc {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-500);
    margin: 0 0 0.75rem 0;
}

/* -- Icon pick button (en servicios) --------------------------------------- */
.ld-icon-pick-btn {
    width: 100%;
    min-height: 42px;
    padding: 0.58rem 0.5rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    font-family: inherit;
}
.ld-icon-pick-btn:hover {
    border-color: var(--ld-gray-400);
}
.ld-icon-pick-btn:focus-visible {
    outline: none;
    border-color: var(--ld-gray-400);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

/* -- Clases auxiliares de editor ------------------------------------------ */
.ld-editor-section-desc {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-500);
    margin-bottom: 1.25rem;
}

.ld-editor-hint-text {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-400);
    margin: 0;
}
.ld-editor-textarea {
    resize: vertical;
    min-height: 80px;
}
.ld-editor-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.ld-editor-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.ld-editor-checkbox-label {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-600);
    cursor: pointer;
    margin: 0;
    line-height: 1.4;
}
.ld-editor-subsection {
    padding-top: 1rem;
}
.ld-editor-subsection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.ld-editor-toggle-btn {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-accent);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}
.ld-editor-pro-section {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}

/* -- Upload area (editor aliases share base styles above) ----------------- */
.ld-editor-img-preview {
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: var(--ld-radius-md);
    display: block;
}
.ld-editor-img-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background 0.12s;
}
.ld-editor-img-remove:hover { background: rgba(0,0,0,0.75); }

/* -- Progress bar ---------------------------------------------------------- */
.ld-editor-progress-bar-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ld-editor-progress-track {
    flex: 1;
    height: 6px;
    background: var(--ld-gray-100);
    border-radius: 9999px;
    overflow: hidden;
}
.ld-editor-progress-fill {
    height: 100%;
    background: var(--ld-accent);
    transition: width 0.3s;
}
.ld-editor-progress-text {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-400);
}

/* -- Stats grid ----------------------------------------------------------- */
.ld-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.ld-stat-card {
    padding: 0.75rem;
    background: var(--ld-gray-50);
    border-radius: var(--ld-radius-md);
    border: 1px solid var(--ld-border);
}
.ld-stat-label {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--ld-gray-400);
    margin-bottom: 0.5rem;
}
.ld-stat-fields {
    display: flex;
    gap: 0.5rem;
}
.ld-stat-number {
    width: 70px;
    font-weight: 600;
    text-align: center;
    flex-shrink: 0;
}
.ld-stat-text { flex: 1; }

/* -- Stats list (1 column, editor panel) ----------------------------------- */
.ld-stats-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.ld-stat-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ld-stat-row-label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ld-gray-500);
    white-space: nowrap;
    width: 80px;
    flex-shrink: 0;
}
.ld-stat-row .ld-stat-fields {
    flex: 1;
}

/* -- AI style radio list (1 column with visible radio dot) ----------------- */
.ld-ai-style-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* Gallery AI modal — compact 2-column style picker */
#gallery-ai-modal .ld-ai-style-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
#gallery-ai-modal .ld-radio-row {
    padding: 0.4375rem 0.5rem;
    gap: 0.4375rem;
}
#gallery-ai-modal .ld-radio-row-dot {
    width: 14px;
    height: 14px;
}
#gallery-ai-modal .ld-radio-row strong {
    font-size: 0.8125rem;
}
#gallery-ai-modal .ld-ai-modal-field {
    margin-bottom: 1rem;
}
#gallery-ai-modal .ld-ai-modal-body {
    padding: 1rem 1.25rem;
}

/* -- Custom testimonials list ---------------------------------------------- */
.ld-testimonials-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* -- AI style radio list (1 column with visible radio dot) ----------------- */
.ld-radio-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    background: white;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.ld-radio-row:hover {
    border-color: var(--ld-gray-300);
    background: var(--ld-gray-50);
}
.ld-radio-row input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ld-radio-row-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--ld-border);
    flex-shrink: 0;
    transition: border-color 0.15s;
    position: relative;
}
.ld-radio-row-dot::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--ld-primary);
    opacity: 0;
    transition: opacity 0.15s;
}
.ld-radio-row input[type="radio"]:checked ~ .ld-radio-row-dot,
.ld-radio-row:has(input:checked) .ld-radio-row-dot {
    border-color: var(--ld-primary);
}
.ld-radio-row:has(input:checked) .ld-radio-row-dot::after {
    opacity: 1;
}
.ld-radio-row:has(input:checked) {
    border-color: var(--ld-primary);
    background: color-mix(in srgb, var(--ld-primary) 4%, white);
}
.ld-radio-row strong {
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    color: var(--ld-gray-800);
}
.ld-radio-row:has(input:checked) strong {
    color: var(--ld-gray-900);
    font-weight: 600;
}

/* -- Banners de estado ----------------------------------------------------- */
.ld-editor-success-banner {
    background: var(--ld-success-surface);
    border: 1px solid var(--ld-success-border);
    border-radius: var(--ld-radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}
.ld-editor-success-icon {
    width: 22px;
    height: 22px;
    color: var(--ld-accent);
    flex-shrink: 0;
}
.ld-editor-success-title {
    font-weight: 600;
    color: var(--ld-gray-800);
    margin: 0;
    font-size: var(--ld-font-size-sm);
}
.ld-editor-success-text {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-500);
    margin: 0;
}
.ld-editor-warning-banner {
    background: var(--ld-gray-50);
    border-radius: var(--ld-radius-md);
    padding: 1.5rem;
    text-align: center;
}
.ld-editor-warning-icon {
    width: 40px;
    height: 40px;
    color: var(--ld-gray-300);
    margin: 0 auto 0.75rem;
    display: block;
}
.ld-editor-warning-title {
    font-weight: 600;
    color: var(--ld-gray-700);
    margin-bottom: 0.5rem;
}
.ld-editor-warning-text {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-500);
    margin-bottom: 0.5rem;
}
.ld-editor-info-banner {
    background: var(--ld-gray-50);
    border-radius: var(--ld-radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-600);
    line-height: 1.5;
}

/* -- Reviews list ---------------------------------------------------------- */
.ld-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 0.25rem;
}
.ld-review-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.ld-review-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.ld-review-author {
    font-weight: 500;
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-900);
    margin: 0;
}
.ld-review-meta {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-400);
    margin: 0;
}
.ld-review-text {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-600);
    margin: 0;
    line-height: 1.4;
}

/* -- Gallery grid ---------------------------------------------------------- */
.ld-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}
.ld-gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--ld-radius-md);
    overflow: hidden;
    background: var(--ld-gray-100);
}
.ld-gallery-remove {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    width: 22px;
    height: 22px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1;
    transition: background 0.12s;
}
.ld-gallery-remove:hover { background: rgba(220,38,38,0.85); }

/* -- FAQ items ------------------------------------------------------------- */
.ld-faq-item {
    padding: 1rem;
    background: #fff;
}
.ld-faq-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.ld-faq-item-title {
    font-weight: 500;
    color: var(--ld-gray-700);
    margin: 0;
    font-size: var(--ld-font-size-sm);
}

/* -- Social row ------------------------------------------------------------ */
.ld-social-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.ld-social-icon-wrap {
    width: 38px;
    height: 38px;
    background: var(--ld-gray-50);
    border-radius: var(--ld-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* -- Horarios -------------------------------------------------------------- */
#structured-hours-panel {
    margin-top: 1rem;
}
.ld-hours-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.875rem;
    background: var(--ld-gray-50);
    border-radius: var(--ld-radius-sm);
}
.ld-hours-row--closed { background: #fef2f2; }
.ld-hours-structured-toggle {
    width: 100%;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0;
    font-size: inherit;
    color: inherit;
}
.ld-contact-form-toggle {
    width: 100%;
    align-items: center;
    gap:1rem;
    font-size: inherit;
    color: inherit;
}
.ld-hours-structured-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-width: 0;
}
.ld-contact-form-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}
.ld-hours-structured-toggle-title {
    font-size: var(--ld-font-size-control);
    font-weight: 600;
    color: var(--ld-gray-800);
}
.ld-hours-structured-toggle .ld-editor-label-hint,
.ld-contact-form-toggle .ld-editor-label-hint {
    font-size: var(--ld-font-size-muted);
}
.ld-hours-day {
    width: 76px;
    font-size: var(--ld-font-size-muted);
    font-weight: 600;
    color: var(--ld-gray-700);
    flex-shrink: 0;
}
.ld-hours-check {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    font-size: var(--ld-font-size-xs);
    font-weight: 500;
    color: var(--ld-gray-500);
}
.ld-hours-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1.5px solid var(--ld-border);
    border-radius: 3px;
    background: #fff;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}
.ld-hours-check input[type="checkbox"]:checked {
    background: var(--ld-primary);
    border-color: var(--ld-primary);
}
.ld-hours-check input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 3.5px;
    top: 1px;
    width: 3px;
    height: 6.5px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.ld-hours-inputs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
}
.ld-time-input {
    padding: 0.4375rem 0.5rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    font-size: var(--ld-font-size-muted);
    width: 96px;
    color: var(--ld-gray-700);
    background: #fff;
    cursor: pointer;
}
.ld-hours-sep {
    color: var(--ld-gray-500);
    font-size: var(--ld-font-size-muted);
}
.ld-hours-sep--muted { color: var(--ld-gray-300); margin-left: 0.25rem; }

/* -- Form Sub-tabs (underline style, nested inside Contact > Formulario) --- */
.ld-form-subtabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ld-border);
    margin-bottom: 1.25rem;
}
.ld-form-subtab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.875rem;
    font-size: var(--ld-font-size-xs);
    font-weight: 500;
    color: var(--ld-gray-500);
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.ld-form-subtab:hover {
    color: var(--ld-gray-700);
}
.ld-form-subtab.active {
    color: var(--ld-gray-900);
    border-bottom-color: var(--ld-gray-900);
    font-weight: 600;
}

.ld-form-tab-panel[data-form-panel="config"] > .ld-editor-card {
    margin-bottom: 1.25rem;
}
.ld-form-tab-panel[data-form-panel="config"] > .ld-editor-card-title,
.ld-form-config-block-header {
    margin-top: 1.25rem;
    margin-bottom: 0.625rem;
}
.ld-form-tab-panel[data-form-panel="config"] > .ld-editor-card-title:first-child {
    margin-top: 0;
}
.ld-form-config-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

select.ld-editor-input {
    cursor: pointer;
}

/* -- Form Builder (Contact > Formulario) ----------------------------------- */
.ld-form-templates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}
.ld-form-template-card {
    display: flex;
    flex-direction: column;
    padding: 0.875rem 1rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    cursor: pointer;
    transition: all 0.15s;
    background: #fff;
}
.ld-form-template-card:hover {
    border-color: var(--ld-gray-300);
    background: var(--ld-gray-25);
}
.ld-form-template-card.active {
    border-color: var(--ld-accent);
    background: var(--ld-accent-50);
}
.ld-form-template-name {
    font-weight: 600;
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-800);
    margin-bottom: 0.125rem;
}
.ld-form-template-desc {
    font-size: 0.75rem;
    color: var(--ld-gray-500);
}


.ld-form-fields-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.ld-form-field-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 32px;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    background: #fff;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.ld-form-field-row:hover {
    border-color: var(--ld-gray-300);
    background: var(--ld-gray-50);
}
.ld-form-field-drag {
    cursor: grab;
    width: 24px;
    min-height: 42px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ld-gray-400);
    border-radius: var(--ld-radius-sm);
}
.ld-form-field-drag:hover { background: var(--ld-gray-100); color: var(--ld-gray-600); }
.ld-form-field-drag:active { cursor: grabbing; }
.ld-form-field-inputs {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) 130px auto;
    gap: 0.5rem 0.625rem;
    align-items: center;
    min-width: 0;
}
.ld-form-field-label {
    min-width: 0;
    font-weight: 500;
}
.ld-form-field-type {
    width: 130px;
    background-color: var(--ld-gray-50);
}
.ld-form-field-required {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 40px;
    padding: 0 0.75rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    background: var(--ld-gray-50);
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ld-gray-600);
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ld-form-field-required:hover {
    border-color: var(--ld-gray-300);
    color: var(--ld-gray-900);
}
.ld-form-field-required:has(input:checked) {
    border-color: var(--ld-accent-200);
    background: var(--ld-accent-50);
    color: var(--ld-accent-dark);
}
.ld-form-field-required input { cursor: pointer; accent-color: var(--ld-accent); }
.ld-form-field-extra {
    grid-column: 2;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--ld-gray-100);
}
.ld-form-field-options-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ld-form-field-option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    gap: 0.5rem;
    align-items: center;
}
.ld-form-field-option-input {
    font-size: 0.8125rem;
}
.ld-form-field-add-option {
    align-self: flex-start;
    font-size: 0.8125rem;
    min-height: 32px;
    padding: 0.35rem 0.75rem;
}
.ld-form-field-option-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ld-gray-400);
    border-radius: var(--ld-radius-sm);
    transition: all 0.12s;
}
.ld-form-field-option-delete:hover {
    background: var(--ld-error-bg, #fef2f2);
    color: var(--ld-error, #dc2626);
}
.ld-form-field-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    color: var(--ld-gray-400);
    border-radius: var(--ld-radius-sm);
    transition: all 0.12s;
}
.ld-form-field-delete:hover {
    background: var(--ld-error-bg, #fef2f2);
    color: var(--ld-error, #dc2626);
}

@media (max-width: 720px) {
    .ld-form-field-row {
        grid-template-columns: 20px minmax(0, 1fr) 32px;
        padding: 0.875rem;
    }
    .ld-form-field-inputs {
        grid-template-columns: 1fr;
    }
    .ld-form-field-type {
        width: 100%;
    }
}

.ld-form-preview {
    background: var(--ld-gray-50);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    padding: 1.25rem;
    min-height: 120px;
}
.ld-form-preview-field {
    margin-bottom: 1rem;
}
.ld-form-preview-field:last-child {
    margin-bottom: 0;
}
.ld-form-preview-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ld-gray-700);
    margin-bottom: 0.375rem;
}
.ld-form-preview-label .required {
    color: var(--ld-error, #dc2626);
}
.ld-form-preview-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    font-size: 0.875rem;
    background: #fff;
}
.ld-form-preview-input:disabled {
    background: var(--ld-gray-100);
}
.ld-form-preview-textarea {
    min-height: 80px;
    resize: vertical;
}
.ld-form-preview-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ld-form-preview-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1.25rem;
    background: var(--ld-accent);
    color: #fff;
    border: none;
    border-radius: var(--ld-radius-sm);
    font-weight: 500;
    font-size: 0.875rem;
    cursor: default;
    margin-top: 0.5rem;
}

/* -- SEO preview ----------------------------------------------------------- */
.ld-seo-preview-title {
    font-size: var(--ld-font-size-sm);
    color: #1a73e8;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 0.2rem;
}
.ld-seo-preview-url {
    color: var(--ld-accent);
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 0.25rem;
}
.ld-seo-preview-desc {
    color: var(--ld-gray-600);
    font-size: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
.ld-seo-preview-title-label {
    font-weight: 500;
    color: var(--ld-gray-700);
    margin-bottom: 0.5rem;
    font-size: var(--ld-font-size-sm);
}

/* -- SEO keywords ---------------------------------------------------------- */
.ld-kw-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--ld-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.25rem;
}
.ld-kw-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}
.ld-kw-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    border-radius: var(--ld-radius-sm);
    font-size: 0.75rem;
    font-weight: 500;
}
.ld-kw-tag--primary {
    background: var(--ld-accent-bg);
    color: var(--ld-accent);
}
.ld-kw-tag--secondary {
    background: var(--ld-gray-50);
    color: var(--ld-gray-600);
}

/* -- Badges ---------------------------------------------------------------- */
.ld-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--ld-radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.ld-badge--success {
    background: var(--ld-accent-50);
    color: var(--ld-accent);
}
.ld-badge--pro {
    background: var(--ld-gray-900);
    color: #fff;
    text-transform: uppercase;
    font-size: 0.625rem;
    letter-spacing: 0.06em;
}

.ld-badge-pro-small {
    display: inline-flex;
    padding: 2px 6px;
    margin-left: 6px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: linear-gradient(135deg, var(--ld-primary), #8b5cf6);
    color: white;
    border-radius: 4px;
    vertical-align: middle;
}

/* -- Modal ----------------------------------------------------------------- */
.ld-modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: var(--ld-z-modal);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.ld-modal-box {
    background: var(--ld-content-bg);
    border-radius: var(--ld-radius-xl);
    max-width: 500px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ld-modal-header {
    padding: 1rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ld-modal-title {
    font-size: var(--ld-font-size-base);
    font-weight: 700;
    color: var(--ld-gray-900);
    margin: 0;
}
.ld-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ld-gray-400);
    font-size: 1.5rem;
    line-height: 1;
    transition: color 0.12s;
}
.ld-modal-close:hover { color: var(--ld-gray-700); }
.ld-modal-tabs {
    padding: 0.75rem 1rem;
    display: flex;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.ld-modal-tab {
    padding: 0.3rem 0.625rem;
    border-radius: 9999px;
    font-size: var(--ld-font-size-xs);
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: var(--ld-gray-100);
    color: var(--ld-gray-600);
    transition: all 0.12s;
}
.ld-modal-tab.active {
    background: var(--ld-gray-900);
    color: #fff;
}
.ld-icons-grid {
    padding: 1rem;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
}

.ld-icon-picker-modal {
    max-width: 520px;
}
.ld-icon-picker-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.75rem 1.25rem 0;
}
.ld-icon-picker-tabs .ld-modal-tab {
    padding: 0.3rem 0.625rem;
    border-radius: 9999px;
    font-size: var(--ld-font-size-xs);
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: var(--ld-gray-100);
    color: var(--ld-gray-600);
    transition: all 0.12s;
}
.ld-icon-picker-tabs .ld-modal-tab.active {
    background: var(--ld-gray-900);
    color: #fff;
}

@media (max-width: 768px) {
    .ld-icon-picker-overlay {
        align-items: flex-end;
        padding: 0;
    }
    .ld-icon-picker-modal {
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 85vh;
    }
    .ld-icon-picker-modal .ld-icons-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* -- Bot?n principal accent ------------------------------------------------ */
.ld-btn--accent {
    background: var(--ld-accent);
    color: #fff;
    border: none;
    border-radius: var(--ld-radius-sm);
    padding: 0.625rem 1rem;
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: opacity 0.12s;
}
.ld-btn--accent:hover { opacity: 0.88; }

/* -- Border-radius Vercel para botones de interfaz ----------------------- */
.ld-editor-panel .ld-btn,
.ld-editor-panel .ld-btn-primary,
.ld-editor-panel .ld-btn-secondary,
.ld-editor-panel .ld-editor-add-btn,
.ld-editor-panel .ld-editor-ai-btn,
.ld-editor-panel .ld-regen-btn,
.ld-editor-header .ld-btn,
.ld-editor-header .ld-btn-primary,
.ld-editor-header .ld-btn-secondary {
    border-radius: var(--ld-radius-sm);
}

/* -- Promo Banner (dashboard) ------------------------------------------- */
.ld-promo-banner {
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 50%, #A855F7 100%);
    border-radius: 12px;
    padding: 2px;
    margin-bottom: 16px;
}
.ld-promo-banner-content {
    background: linear-gradient(135deg, rgba(99,102,241,0.95) 0%, rgba(139,92,246,0.95) 100%);
    border-radius: 10px;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.ld-promo-banner-text {
    flex: 1;
    min-width: 200px;
    color: white;
    font-size: 15px;
    line-height: 1.4;
}
.ld-promo-badge {
    display: inline-block;
    background: rgba(255,255,255,0.2);
    color: white;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 8px;
    border-radius: 4px;
    margin-right: 10px;
    vertical-align: middle;
}
.ld-promo-banner-timer {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.8);
    font-size: 12px;
}
.ld-promo-countdown {
    display: flex;
    align-items: center;
    gap: 4px;
}
.ld-promo-unit {
    background: rgba(0,0,0,0.2);
    border-radius: 6px;
    padding: 6px 8px;
    text-align: center;
    min-width: 44px;
}
.ld-promo-unit span {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: white;
    line-height: 1;
}
.ld-promo-unit small {
    font-size: 10px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
}
.ld-promo-sep {
    font-size: 18px;
    font-weight: 700;
    color: rgba(255,255,255,0.5);
}
.ld-promo-cta {
    background: white;
    color: #6366F1;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 24px;
    border-radius: 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
}
.ld-promo-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
    .ld-promo-banner-content { flex-direction: column; text-align: center; }
    .ld-promo-cta { width: 100%; text-align: center; }
}



/* ========================================
   Partners page
   ======================================== */
.ld-partners-page {
    position: relative;
}

/* Sticky "¿Por qué sumarte?" needs visible overflow on ancestors */
body:has(.ld-partners-page),
.ld-app:has(.ld-partners-page),
.ld-main:has(.ld-partners-page),
.ld-content:has(.ld-partners-page) {
    overflow-x: visible;
}

.ld-content:has(.ld-partners-page) {
    background: transparent;
    border: none;
    padding: 24px;
}

/* Grid pattern background */
.ld-partners-grid-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 600px;
    background-image: 
        linear-gradient(rgba(0,0,0,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.035) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 50%, rgba(0,0,0,0));
}

/* Hero centrado */
.ld-partners-hero {
    text-align: center;
    padding: 3rem 2rem 4rem;
    position: relative;
    z-index: 1;
}
.ld-partners-label {
    display: inline-block;
    font-size: var(--ld-font-size-micro);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ld-gray-400);
    margin-bottom: 1.25rem;
}
.ld-partners-hero h1 {
    font-size: var(--ld-font-size-display-lg);
    font-weight: 700;
    color: var(--ld-gray-900);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin: 0 0 1.25rem;
}
.ld-partners-hero > p {
    font-size: var(--ld-font-size-lg);
    color: var(--ld-gray-500);
    max-width: 460px;
    margin: 0 auto 2rem;
    line-height: 1.6;
}
.ld-partners-note {
    display: block;
    margin-top: 1rem;
    font-size: var(--ld-font-size-2xs);
    color: var(--ld-gray-400);
}

/* Buttons */
.ld-partners-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--ld-radius-md);
    font-size: var(--ld-font-size-control);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    font-family: inherit;
}
.ld-partners-btn svg {
    width: 16px;
    height: 16px;
}
.ld-partners-btn-primary {
    background: var(--ld-primary);
    color: #fff;
}
.ld-partners-btn-primary:hover {
    background: var(--ld-accent-700, #4338ca);
}
.ld-partners-btn-lg {
    padding: 0.875rem 2rem;
    font-size: var(--ld-font-size-md);
}

/* ---- Features split ---- */
.ld-partners-features {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    padding: 4rem 4rem;
    position: relative;
    z-index: 1;
}
.ld-partners-features-left {
    position: sticky;
    top: 100px;
    align-self: start;
}
.ld-partners-features-left h2 {
    font-size: var(--ld-font-size-display-sm);
    font-weight: 700;
    color: var(--ld-gray-900);
    letter-spacing: -0.025em;
    margin: 0 0 1rem;
}
.ld-partners-features-left p {
    font-size: var(--ld-font-size-md);
    color: var(--ld-gray-500);
    margin: 0;
    line-height: 1.7;
}

.ld-partners-features-right {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-left: 1px solid var(--ld-border);
    position: relative;
}
.ld-partners-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 2rem 0 2rem 2.5rem;
    border-bottom: 1px solid var(--ld-border);
    position: relative;
}
.ld-partners-feature-item:last-child {
    border-bottom: none;
}
/* Cruz + en la intersecci?n */
.ld-partners-cross {
position: absolute;
    left: -6px;
    top: -6px;
    width: 11px;
    height: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 300;
    color: #aaa;
    background: var(--ld-bg);
    z-index: 1;
    font-family: auto;
}
.ld-partners-cross::before {
    content: '+';
}
.ld-partners-feature-item:first-child .ld-partners-cross {
    top: -1px;
    display: none;
}
.ld-partners-feature-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    background: #fff;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ld-partners-feature-icon svg {
    width: 22px;
    height: 22px;
    color: var(--ld-gray-700);
}
.ld-partners-feature-item h3 {
    font-size: var(--ld-font-size-lg);
    font-weight: 600;
    color: var(--ld-gray-900);
    margin: 0 0 0.5rem;
}
.ld-partners-feature-item p {
    font-size: var(--ld-font-size-md);
    color: var(--ld-gray-500);
    margin: 0;
    line-height: 1.6;
}

/* ---- Dark section ---- */
.ld-partners-dark {
    background:var(--ld-sidebar-active-bg);
    padding: 4rem 4rem;
    position: relative;
    z-index: 1;
    border-radius: 6px;
    overflow: hidden;
}

.ld-partners-dark-header {
    position: relative;
    z-index: 1;
    margin-bottom: 2.5rem;
}
.ld-partners-dark-header h2 {
    font-size: var(--ld-font-size-3xl);
    font-weight: 700;
    color: var(--ld-gray-900);
    letter-spacing: -0.02em;
    margin: 0;
}
.ld-partners-dark-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    border-radius: var(--ld-radius-md);
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.ld-partners-dark-item {
    padding: 0;
    display: flex;
    flex-direction: column;
}
.ld-partners-dark-item h3 {
    font-size: var(--ld-font-size-lg);
    font-weight: 600;
    color: var(--ld-gray-900);
    margin: 0 0 0.75rem;
}
.ld-partners-dark-item p {
    font-size: var(--ld-font-size-muted);
    color: var(--ld-gray-600);
    margin: 0;
    line-height: 1.6;
    flex: 1;
}
.ld-partners-dark-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--ld-gray-900);
    border-radius: 50%;
    margin-bottom: 1.5rem;
    color: var(--ld-gray-900);;
}
.ld-partners-dark-arrow svg {
    width: 16px;
    height: 16px;
    color: rgba(255,255,255,0.6);
}

/* CTA final */
.ld-partners-cta-final {
    text-align: center;
    padding: 4rem 2rem;
    position: relative;
    z-index: 1;
}
.ld-partners-cta-final > p {
    font-size: var(--ld-font-size-muted);
    color: var(--ld-gray-500);
    margin: 0 0 1.25rem;
}

/* Responsive */
@media (max-width: 900px) {
    .ld-partners-features {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .ld-partners-features-left {
        position: static;
    }
    .ld-partners-hero h1 { font-size: var(--ld-font-size-display-md); }
    .ld-partners-dark-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .ld-partners-hero { padding: 3rem 1.5rem 2.5rem; }
    .ld-partners-features { padding: 2.5rem 1.5rem; }
    .ld-partners-dark { padding: 3rem 1.5rem; }
    .ld-partners-cta-final { padding: 3rem 1.5rem; }
    .ld-partners-hero h1 { font-size: var(--ld-font-size-display-sm); }
}

/* ========================================
   Legacy styles (keeping for dashboard)
   ======================================== */
.ld-aff-page { padding: 0; }

/* Dashboard */
.ld-aff-dash-hero {
    background: linear-gradient(135deg, var(--ld-accent) 0%, #7c3aed 100%);
    border-radius: var(--ld-radius-xl);
    padding: 2rem;
    color: #fff;
    margin-bottom: 1.5rem;
}
.ld-aff-dash-hero-top {
    margin-bottom: 1.5rem;
}
.ld-aff-dash-hero-top h1 {
    font-size: var(--ld-font-size-2xl);
    font-weight: 700;
    margin: 0 0 0.25rem;
}
.ld-aff-dash-hero-top p {
    font-size: var(--ld-font-size-sm);
    opacity: 0.85;
    margin: 0;
}

.ld-aff-credits-card {
    background: rgba(255,255,255,0.15);
    border-radius: var(--ld-radius-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.ld-aff-credits-main {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.ld-aff-credits-number {
    font-size: var(--ld-font-size-display-lg);
    font-weight: 700;
    line-height: 1;
}
.ld-aff-credits-label {
    font-size: var(--ld-font-size-md);
    opacity: 0.9;
}
.ld-aff-redeem-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: var(--ld-accent);
    font-weight: 600;
    padding: 0.75rem 1.25rem;
    border-radius: var(--ld-radius-lg);
    border: none;
    cursor: pointer;
    font-size: var(--ld-font-size-muted);
    transition: transform 0.15s, box-shadow 0.15s;
}
.ld-aff-redeem-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.ld-aff-redeem-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}
.ld-aff-redeem-btn svg {
    width: 18px;
    height: 18px;
}
.ld-aff-no-credits {
    font-size: var(--ld-font-size-sm);
    opacity: 0.8;
    margin: 0;
}

.ld-aff-dash-hero-stats {
    display: flex;
    gap: 2rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.2);
}
.ld-aff-dash-stat {
    text-align: center;
}
.ld-aff-dash-stat-val {
    display: block;
    font-size: var(--ld-font-size-2xl);
    font-weight: 700;
}
.ld-aff-dash-stat-label {
    font-size: var(--ld-font-size-xs);
    opacity: 0.8;
}

/* Banner */
.ld-aff-banner {
    background: var(--ld-success-surface-alt);
    border: 1px solid var(--ld-success-border-soft);
    border-radius: var(--ld-radius-lg);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.ld-aff-banner-icon {
    width: 40px;
    height: 40px;
    background: var(--ld-success-bg-soft);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ld-aff-banner-icon svg {
    width: 20px;
    height: 20px;
    color: var(--ld-success-dark);
}

/* Sections */
.ld-aff-section {
    background: #fff;
    border-radius: var(--ld-radius-lg);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.ld-aff-section-title {
    font-size: var(--ld-font-size-md);
    font-weight: 600;
    margin: 0 0 1rem;
    color: var(--ld-gray-900);
}

/* Link card */
.ld-aff-link-card {
    display: flex;
    gap: 0.5rem;
}
.ld-aff-link-input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ld-gray-200);
    border-radius: var(--ld-radius-md);
    font-size: var(--ld-font-size-muted);
    color: var(--ld-gray-700);
    background: var(--ld-gray-50);
}
.ld-aff-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ld-accent);
    color: #fff;
    font-weight: 500;
    padding: 0.75rem 1rem;
    border-radius: var(--ld-radius-md);
    border: none;
    cursor: pointer;
    font-size: var(--ld-font-size-muted);
    transition: background 0.15s;
}
.ld-aff-copy-btn:hover {
    background: var(--ld-accent-700);
}
.ld-aff-copy-btn svg {
    width: 16px;
    height: 16px;
}
.ld-aff-link-help {
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-500);
    margin: 0.75rem 0 0;
}

/* Empty state */
.ld-aff-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--ld-gray-500);
}
.ld-aff-empty svg {
    width: 48px;
    height: 48px;
    margin-bottom: 1rem;
    opacity: 0.5;
}
.ld-aff-empty p {
    margin: 0;
    font-size: var(--ld-font-size-sm);
}

/* History */
.ld-aff-history {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.ld-aff-history-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--ld-gray-50);
    border-radius: var(--ld-radius-md);
}
.ld-aff-history-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ld-aff-history-icon svg {
    width: 16px;
    height: 16px;
}
.ld-aff-history-icon--credit {
    background: var(--ld-success-bg-soft);
    color: var(--ld-success-dark);
}
.ld-aff-history-icon--redeem {
    background: #dbeafe;
    color: #2563eb;
}
.ld-aff-history-content {
    flex: 1;
    min-width: 0;
}
.ld-aff-history-text {
    display: block;
    font-size: var(--ld-font-size-muted);
    color: var(--ld-gray-800);
}
.ld-aff-history-date {
    font-size: var(--ld-font-size-xs);
    color: var(--ld-gray-500);
}
.ld-aff-history-amount {
    font-weight: 600;
    font-size: var(--ld-font-size-muted);
}
.ld-aff-history-amount--plus {
    color: var(--ld-success-dark);
}
.ld-aff-history-amount--minus {
    color: #2563eb;
}

/* Spinner */
@keyframes ld-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.ld-spin {
    animation: ld-spin 1s linear infinite;
}

/* Responsive */
@media (max-width: 600px) {
    .ld-aff-credits-card {
        flex-direction: column;
        text-align: center;
    }
    .ld-aff-credits-main {
        flex-direction: column;
        align-items: center;
        gap: 0.25rem;
    }
    .ld-aff-dash-hero-stats {
        justify-content: center;
    }
    .ld-aff-link-card {
        flex-direction: column;
    }
}

/* ── WYSIWYG Editor (páginas legales) ──────────────────────────────── */
.ld-wysiwyg-wrap {
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    overflow: hidden;
    background: #fff;
}
.ld-wysiwyg-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 0.375rem 0.5rem;
    background: var(--ld-gray-50);
    border-bottom: 1px solid var(--ld-border);
}
.ld-wysiwyg-toolbar button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 26px;
    padding: 0 6px;
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ld-gray-600);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    line-height: 1;
}
.ld-wysiwyg-toolbar button:hover {
    background: #fff;
    border-color: var(--ld-border);
    color: var(--ld-gray-900);
}
.ld-wysiwyg-toolbar button.active {
    background: var(--ld-primary);
    border-color: var(--ld-primary);
    color: #fff;
}
.ld-wysiwyg-toolbar .ld-wysiwyg-sep {
    width: 1px;
    height: 20px;
    background: var(--ld-border);
    align-self: center;
    margin: 0 2px;
}
.ld-wysiwyg-editor {
    min-height: 220px;
    max-height: 520px;
    overflow-y: auto;
    padding: 0.875rem 1rem;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ld-gray-700);
    outline: none;
}
.ld-wysiwyg-editor:focus {
    box-shadow: inset 0 0 0 2px var(--ld-primary-100, rgba(37,99,235,0.15));
}
.ld-wysiwyg-editor h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ld-gray-900);
    margin: 1em 0 0.35em;
}
.ld-wysiwyg-editor h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ld-gray-800);
    margin: 0.85em 0 0.3em;
}
.ld-wysiwyg-editor p {
    margin: 0 0 0.6em;
}
.ld-wysiwyg-editor ul,
.ld-wysiwyg-editor ol {
    padding-left: 1.5em;
    margin: 0 0 0.6em;
}
.ld-wysiwyg-editor strong { font-weight: 700; }
.ld-wysiwyg-editor em { font-style: italic; }
.ld-wysiwyg-editor a { color: var(--ld-primary); text-decoration: underline; }

/* =====================================================
   PAGE: ANALYTICS
   ===================================================== */
.ld-analytics-page { max-width: 1000px; margin: 0 auto; padding: 0; overflow: hidden; }
.ld-analytics-page .ld-card-body { overflow: hidden; }
.ld-analytics-upgrade-overlay { display: flex; align-items: center; justify-content: center; min-height: 60vh; padding: 2rem; }
.ld-analytics-upgrade-card { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid var(--ld-border); border-radius: var(--ld-radius); padding: 3rem; text-align: center; max-width: 550px; }
.ld-upgrade-icon { color: var(--ld-primary); margin-bottom: 1.5rem; }
.ld-analytics-upgrade-card h2 { font-size: var(--ld-font-size-2xl); font-weight: 700; margin-bottom: 1rem; color: var(--ld-gray-900); }
.ld-analytics-upgrade-card > p { color: var(--ld-gray-600); margin-bottom: 1.5rem; }
.ld-upgrade-metrics-preview { display: flex; gap: 1.5rem; justify-content: center; margin-bottom: 1.5rem; padding: 1.5rem; background: white; border-radius: var(--ld-radius-sm); border: 1px solid var(--ld-border); }
.ld-preview-metric { text-align: center; }
.ld-preview-value { display: block; font-size: var(--ld-font-size-3xl); font-weight: 800; color: var(--ld-primary); margin-bottom: 0.25rem; }
.ld-preview-label { font-size: var(--ld-font-size-2xs); color: var(--ld-gray-500); text-transform: uppercase; letter-spacing: 0.02em; }
.ld-upgrade-benefit { font-weight: 500; color: var(--ld-gray-700); margin-bottom: 1.5rem !important; }
.ld-dopamine-hero {     background: var(--ld-accent);
    border-radius: var(--ld-radius-sm);  padding: 2rem 2.5rem; margin-bottom: var(--ld-spacing-5); color: #fff; }
.ld-dopamine-label { font-size: var(--ld-font-size-md); font-weight: 500; opacity: 0.9; margin-bottom: 1.25rem; }
.ld-dopamine-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 640px) { .ld-dopamine-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }
.ld-dopamine-stat { text-align: center; }
.ld-dopamine-value { display: block; font-size: var(--ld-font-size-display-md); font-weight: 800; line-height: 1; letter-spacing: -0.02em; margin-bottom: 0.375rem; }
.ld-dopamine-stat-label { font-size: var(--ld-font-size-xs); opacity: 0.8; }
.ld-insights-card { background: #fff; border: 1px solid var(--ld-border); border-radius: var(--ld-radius); padding: var(--ld-spacing-4); margin-bottom: var(--ld-spacing-5); }
.ld-insights-header { display: flex; align-items: center; gap: 0.625rem; margin-bottom: var(--ld-spacing-3); padding-bottom: var(--ld-spacing-3); border-bottom: 1px solid var(--ld-border); }
.ld-insights-icon { width: 32px; height: 32px; background: linear-gradient(135deg, rgba(99,102,241,0.1) 0%, rgba(139,92,246,0.15) 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--ld-primary); }
.ld-insights-header span { font-weight: 600; font-size: var(--ld-font-size-sm); color: var(--ld-gray-700); }
.ld-insights-list { display: flex; flex-direction: column; gap: 0.75rem; }
.ld-insight-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem; border-radius: var(--ld-radius-sm); }
.ld-insight-item svg { flex-shrink: 0; color: var(--ld-primary); }
.ld-insight-item p { margin: 0; font-size: var(--ld-font-size-control); color: var(--ld-gray-700); line-height: 1.5; }
.ld-insight-loading { text-align: center; color: var(--ld-gray-500); font-size: var(--ld-font-size-muted); padding: 1rem; }
.ld-period-nav { display: inline-flex; align-self: center; background: var(--ld-gray-100); border-radius: var(--ld-radius-sm); border: 1px solid var(--ld-border); padding: 4px; }
.ld-period-btn { padding: 0.4rem .925rem; font-size: var(--ld-font-size-sm); font-weight: 500; background: transparent; border: none; cursor: pointer; color: var(--ld-gray-500); transition: background 0.15s, color 0.15s; white-space: nowrap; border-radius: calc(var(--ld-radius-sm) - 2px); }
.ld-period-btn:hover { color: var(--ld-gray-800); }
.ld-period-btn.active { background: #fff; color: var(--ld-gray-900); font-weight: 500; }
.ld-period-nav.ld-editor-tabs-underlined { display: flex; align-self: auto; background: transparent; border: 0; border-bottom: 1px solid var(--ld-border); border-radius: 0; padding: 0; }
.ld-period-nav.ld-editor-tabs-underlined .ld-period-btn { border-radius: 0; background: transparent; }
.ld-period-nav.ld-editor-tabs-underlined .ld-period-btn.active { background: transparent; color: var(--ld-gray-900); }
.ld-an-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ld-spacing-3); margin-bottom: var(--ld-spacing-5); }
.ld-an-kpis--compact3 { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 0; }
.ld-an-kpis--spaced { margin-bottom: 2rem; }
@media (max-width: 768px) { .ld-an-kpis { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .ld-an-kpis { grid-template-columns: 1fr !important; } }
.ld-an-kpi { background: #fff; border-radius: 8px; padding: var(--ld-spacing-4); border: 1px solid var(--ld-border); display: flex; align-items: center; gap: var(--ld-spacing-3); min-width: 0; }
.ld-an-kpi-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(99,102,241,0.1); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #6366F1; }
.ld-an-kpi-icon svg { width: 18px; height: 18px; }
.ld-an-kpi-label { font-size: var(--ld-font-size-xs); color: var(--ld-gray-500); margin-bottom: 0.2rem; text-transform: uppercase; }
.ld-an-kpi-label--with-tip { display: inline-flex; align-items: center; gap: 0.3rem; text-transform: uppercase; }
.ld-an-kpi-tip { display: inline-flex; vertical-align: middle; line-height: 1; }
.ld-an-kpi-tip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--ld-gray-200);
    color: var(--ld-gray-500);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    flex-shrink: 0;
}
.ld-an-kpi-tip .ld-tooltip { text-transform: none; font-weight: 400; letter-spacing: normal; }
.ld-tooltip-trigger.ld-an-kpi-tip:focus-visible .ld-tooltip,
.ld-tooltip-trigger.ld-an-kpi-tip:hover .ld-tooltip { opacity: 1; visibility: visible; }
.ld-an-kpi-row { display: flex; align-items: baseline; gap: 0.375rem; }
.ld-an-kpi-value { font-size: var(--ld-font-size-2xl); font-weight: 700; color: var(--ld-gray-900); line-height: 1; }
.ld-an-kpi-change { font-size: var(--ld-font-size-micro); font-weight: 600; }
.ld-change-up { color: var(--ld-success); }
.ld-change-down { color: #ef4444; }
.ld-an-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ld-spacing-4); }
@media (max-width: 640px) { .ld-an-grid2 { grid-template-columns: 1fr; } }
.ld-widget-analytics-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}
@media (max-width: 640px) { .ld-widget-analytics-kpis { grid-template-columns: 1fr; } }
.ld-an-card-title { font-size: var(--ld-font-size-sm); font-weight: 600; color: var(--ld-gray-700); margin-bottom: var(--ld-spacing-4); }
.ld-an-list { display: flex; flex-direction: column; gap: 0.625rem; }
.ld-an-list-sk { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.ld-an-list-row { display: flex; align-items: center; gap: 0.625rem; font-size: var(--ld-font-size-sm); }
.ld-an-list-bar-wrap { flex: 1; height: 4px; background: var(--ld-gray-100); border-radius: 6px; overflow: hidden; }
.ld-an-list-bar { height: 100%; background: #6366F1; opacity: 0.5; border-radius: 6px; }
.ld-an-list-name { flex: 1; color: var(--ld-gray-700); }
.ld-an-list-val { color: var(--ld-gray-500); font-size: var(--ld-font-size-xs); font-weight: 600; white-space: nowrap; }
.ld-an-list-pct { color: var(--ld-gray-400); font-size: var(--ld-font-size-xs); width: 32px; text-align: right; }

/* =====================================================
   PAGE: SITE PROGRESS
   ===================================================== */
.ld-progress-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; background: #FAFAFA; }
.ld-progress-card { background: white; border-radius: 8px; border: 1px solid var(--ld-border); padding: 3rem; max-width: 500px; width: 100%; text-align: center; }
.ld-progress-header { margin-bottom: 2rem; }
.ld-progress-icon { width: 80px; height: 80px; margin: 0 auto 1.5rem; background: var(--ld-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; }
.ld-progress-icon svg { width: 40px; height: 40px; color: white; }
.ld-progress-icon .error-icon { color: var(--ld-error); }
.ld-progress-icon.error { background: rgba(239, 68, 68, 0.1); }
.ld-progress-icon.success { background: var(--ld-success); }
.ld-progress-title { font-size: var(--ld-font-size-3xl); font-weight: 700; color: var(--ld-text); margin: 0 0 0.5rem 0; }
.ld-progress-business { color: var(--ld-text-muted); margin: 0; font-size: var(--ld-font-size-lg); }
.ld-progress-bar-container { height: 8px; background: var(--ld-border); border-radius: 4px; overflow: hidden; margin-bottom: 1rem; }
.ld-progress-bar { height: 100%; background: #6366F1; border-radius: 4px; transition: width 0.5s ease; position: relative; }
.ld-progress-status { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; font-size: var(--ld-font-size-control); }
#progress-message { color: var(--ld-text); }
#progress-percent { color: var(--ld-primary); font-weight: 600; }
.ld-progress-steps { display: flex; justify-content: space-between; margin-bottom: 2rem; gap: 0.5rem; }
.ld-progress-step { flex: 1; padding: 1rem 0.5rem; background: var(--ld-bg-dark); border-radius: 8px; border: 1px solid var(--ld-border); opacity: 0.4; transition: all 0.3s ease; }
.ld-progress-step.active { opacity: 1; background: rgba(99, 102, 241, 0.1); }
.ld-progress-step.completed { opacity: 1; background: rgba(34, 197, 94, 0.1); }
.ld-progress-step .step-icon { font-size: var(--ld-font-size-2xl); margin-bottom: 0.25rem; }
.ld-progress-step .step-text { font-size: var(--ld-font-size-2xs); color: var(--ld-text-muted); }
.ld-progress-error { background: rgba(239, 68, 68, 0.08); border-radius: 8px; border: 1px solid var(--ld-border); padding: 1.5rem; margin-bottom: 1.5rem; }
.ld-progress-error .error-message { color: var(--ld-error); margin: 0 0 1rem 0; }
.ld-progress-success { margin-bottom: 1.5rem; }
.ld-progress-success .success-icon { width: 80px; height: 80px; margin: 0 auto 1rem; background: var(--ld-success); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.ld-progress-success .success-icon svg { width: 40px; height: 40px; color: white; }
.ld-progress-success h2 { color: var(--ld-success); margin: 0 0 0.5rem 0; }
.ld-progress-success p { color: var(--ld-text-muted); margin: 0; }
.ld-progress-footer { padding-top: 1.5rem; }
.ld-progress-footer p { color: var(--ld-text-muted); margin: 0; font-size: var(--ld-font-size-sm); }
@keyframes ld-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ld-spin { animation: ld-spin 1s linear infinite; }

/* =====================================================
   PAGE: CUENTA (AJUSTES)
   ===================================================== */
.ld-cuenta-page { max-width: 700px; margin: 0 auto; padding: 0; }
.ld-content:has(.ld-cuenta-page) { background: transparent; border: none; padding: 24px; }
.ld-section-block { margin-bottom: var(--ld-spacing-6); }
.ld-section-block .ld-card { border-radius: 8px; border: 1px solid var(--ld-border); background: white; }
.ld-cuenta-page .ld-card-body { padding: var(--ld-spacing-5); }
.ld-section-heading { margin-bottom: var(--ld-spacing-3); }
.ld-section-heading h2 { font-size: var(--ld-font-size-base); font-weight: 600; color: var(--ld-gray-900); margin: 0 0 0.2rem 0; }
.ld-section-heading p { font-size: var(--ld-font-size-sm); color: var(--ld-gray-500); margin: 0; }
.ld-form-actions { display: flex; justify-content: flex-end; margin-top: var(--ld-spacing-4); }
.ld-danger-row { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; }
.ld-danger-title { font-size: var(--ld-font-size-base); font-weight: 600; color: var(--ld-gray-900); display: block; margin-bottom: 0.25rem; }
.ld-danger-desc { font-size: var(--ld-font-size-sm); color: var(--ld-gray-500); margin: 0; }
.ld-btn-ghost-danger { background: transparent; border: 1px solid var(--ld-gray-300); color: var(--ld-gray-600); padding: 0.5rem 1rem; border-radius: 6px; font-size: var(--ld-font-size-sm); font-weight: 500; cursor: pointer; transition: border-color 0.12s, color 0.12s; white-space: nowrap; }
.ld-btn-ghost-danger:hover { border-color: var(--ld-gray-600); color: var(--ld-gray-900); }
.ld-editor-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ld-cuenta-page .ld-form-input { border: 1px solid var(--ld-border); border-radius: 6px; background: #fff; }
.ld-cuenta-page .ld-form-input:focus { border-color: var(--ld-gray-400); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); outline: none; }
.ld-cuenta-page .ld-btn-primary { background: #6366F1; border-color: #6366F1; border-radius: 6px; }
.ld-cuenta-page .ld-btn-primary:hover { background: #4F46E5; border-color: #4F46E5; }
@media (max-width: 640px) { .ld-danger-row { flex-direction: column; align-items: flex-start; } .ld-btn-ghost-danger { width: 100%; } }

/* =====================================================
   PAGE: CONTACT
   ===================================================== */
.ld-contact-form .wpcf7 { margin: 0; }
.ld-contact-form .wpcf7-form { display: flex; flex-direction: column; gap: 1rem; }
.ld-contact-form .wpcf7-form-control:not([type="submit"]) { width: 100%; padding: 0.5rem 0.75rem; border: 1px solid var(--ld-border, #EAEAEA); border-radius: var(--ld-radius-sm); font-size: var(--ld-font-size-base); background: white; transition: border-color 0.15s ease; }
.ld-contact-form .wpcf7-form-control:focus { outline: none; border-color: #171717; background: white; }
.ld-contact-form .wpcf7-submit { background: var(--ld-accent); color: white; padding: 0.5rem 1rem; border: none; border-radius: var(--ld-radius-sm); font-size: var(--ld-font-size-base); font-weight: 500; cursor: pointer; transition: background 0.12s; }
.ld-contact-form .wpcf7-submit:hover { background: var(--ld-accent-dark); }
.ld-contact-form .wpcf7-response-output { margin: 1rem 0 0; padding: 1rem; border-radius: var(--ld-radius-sm); }
.ld-contact-success .ld-success-icon { color: var(--ld-success); margin-bottom: 1rem; }
.ld-contact-success h3 { font-size: var(--ld-font-size-lg); margin: 0 0 0.5rem 0; }
.ld-contact-success p { color: var(--ld-gray-600); margin: 0 0 1.5rem 0; }
.ld-contact-info-disabled { font-size: var(--ld-font-size-sm); color: var(--ld-gray-400); }

/* =====================================================
   PAGE: FACTURACIÓN
   ===================================================== */
.ld-billing-toggle-wrap { display: flex; justify-content: center; margin-bottom: 2rem; }
.ld-billing-toggle { display: inline-flex; background: var(--ld-gray-100); border: 1px solid var(--ld-border); border-radius: var(--ld-radius-sm); padding: 3px; }
.ld-toggle-btn { padding: 0.4rem 1rem; border: none; background: transparent; border-radius: calc(var(--ld-radius-sm) - 2px); font-size: var(--ld-font-size-sm); color: var(--ld-gray-500); cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; display: inline-flex; align-items: center; gap: 0.5rem; font-family: inherit; }
.ld-toggle-btn:hover { color: var(--ld-gray-800); }
.ld-toggle-btn.active { background: #fff; color: var(--ld-gray-900); font-weight: 500; }
.ld-plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--ld-border); border-radius: var(--ld-radius-md); background: #fff; overflow: visible; margin-top: 1rem; }
.ld-plan-card { padding: 2rem; border-right: 1px solid var(--ld-border); display: flex; flex-direction: column; position: relative; }
.ld-plan-card:last-child { border-right: none; }
.ld-plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--ld-gray-900); color: #fff; font-size: var(--ld-font-size-micro); font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 4px; white-space: nowrap; z-index: 1; }
.ld-plan-header { display: flex; flex-direction: column; margin-bottom: 1.5rem; }
.ld-plan-header h3 { font-size: var(--ld-font-size-lg); font-weight: 700; color: var(--ld-gray-900); margin: 0 0 0.375rem; }
.ld-plan-header p { font-size: var(--ld-font-size-xs); color: var(--ld-gray-500); margin: 0 0 1rem; line-height: 1.5; min-height: 2.5rem; }
.ld-plan-price { margin: 0; }
.ld-price-amount { font-size: var(--ld-font-size-display-sm); font-weight: 700; color: var(--ld-gray-900); letter-spacing: -0.025em; }
.ld-price-period { font-size: var(--ld-font-size-muted); color: var(--ld-gray-500); margin-left: 0.125rem; }

/* Centavos en superíndice (estilo SaaS): $15⁸³ */
.pricing-cents {
    font-size: 0.58em;
    font-weight: 700;
    vertical-align: super;
    line-height: 0;
    position: relative;
    top: -0.05em;
    margin-left: 1px;
    letter-spacing: 0px;
}
.ld-plan-features { flex: 1; margin-bottom: 1.5rem; }
.ld-features-intro { font-size: var(--ld-font-size-xs); font-weight: 500; color: var(--ld-gray-700); margin: 0 0 0.75rem; }
.ld-plan-features ul { list-style: none; padding: 0; margin: 0; }
.ld-plan-features li { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.3rem 0; font-size: var(--ld-font-size-xs); color: var(--ld-gray-600); line-height: 1.4; }
.ld-plan-features li svg { width: 14px; height: 14px; color: var(--ld-gray-400); flex-shrink: 0; margin-top: 2px; }
.ld-plan-ia-badge { display: inline-block; font-size: var(--ld-font-size-micro); font-weight: 600; padding: 1px 4px; border-radius: 4px; letter-spacing: 0.03em; line-height: 1.2; color: #1a1a1a; border: 1px solid var(--ld-border, #d7d8db); margin-left: 2px; }
.ld-plan-cta { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.75rem 1rem; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-md); background: #fff; color: var(--ld-gray-700); font-size: var(--ld-font-size-muted); font-weight: 500; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.ld-plan-cta:hover { border-color: var(--ld-gray-400); color: var(--ld-gray-900); }
.ld-plan-cta svg { width: 16px; height: 16px; }
.ld-plan-cta-primary { background: var(--ld-primary); border-color: var(--ld-primary); color: #fff; }
.ld-plan-cta-primary:hover { background: var(--ld-accent-700, #4338ca); border-color: var(--ld-accent-700, #4338ca); color: #fff; }
.ld-plan-cta-current { background: var(--ld-gray-100); border-color: var(--ld-gray-100); color: var(--ld-gray-400); cursor: default; }
@media (max-width: 900px) { .ld-plans-grid { grid-template-columns: 1fr; } .ld-plan-card { border-right: none; border-bottom: 1px solid var(--ld-border); } .ld-plan-card:last-child { border-bottom: none; } .ld-plan-badge { top: 0; transform: translateX(-50%); } }

/* Plan change confirmation sheet / modal */
.ld-sheet-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: var(--ld-z-modal); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ld-sheet { background: #fff; border-radius: 12px; max-width: 420px; width: 100%; padding: 1.75rem; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
.ld-sheet-close { position: absolute; top: 0.85rem; right: 1rem; background: none; border: none; cursor: pointer; color: var(--ld-gray-400); font-size: 1.5rem; line-height: 1; }
.ld-sheet-title { margin: 0 0 0.25rem; font-size: var(--ld-font-size-xl); font-weight: 700; color: var(--ld-gray-900); }
.ld-sheet-sub { color: var(--ld-gray-600); margin: 0 0 1rem; font-size: var(--ld-font-size-muted); }
.ld-sheet-plan { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--ld-border); border-radius: 10px; margin-bottom: 1rem; }
.ld-sheet-plan-name { font-weight: 700; font-size: var(--ld-font-size-lg); color: var(--ld-gray-900); }
.ld-sheet-plan-price { font-weight: 700; font-size: var(--ld-font-size-xl); color: var(--ld-gray-900); white-space: nowrap; }
.ld-sheet-plan-period { font-size: var(--ld-font-size-muted); color: var(--ld-gray-500); font-weight: 500; }
.ld-sheet-fineprint { font-size: 0.8rem; color: var(--ld-gray-500); line-height: 1.45; margin: 0 0 1.5rem; }
.ld-sheet-actions { display: flex; flex-direction: column; gap: 0.625rem; }
.ld-sheet-actions .ld-btn { width: 100%; justify-content: center; }
@media (max-width: 640px) {
    .ld-sheet-overlay { align-items: flex-end; padding: 0; }
    .ld-sheet { max-width: 100%; border-radius: 16px 16px 0 0; padding-bottom: 2rem; animation: ld-sheet-up 0.25s ease-out; }
}
@keyframes ld-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* =====================================================
   PAGE: LEADS
   ===================================================== */
.ld-upgrade-prompt { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid var(--ld-border); border-radius: var(--ld-radius); padding: 3rem; text-align: center; max-width: 600px; margin: 2rem auto; }
.ld-upgrade-prompt-icon { color: var(--ld-primary); margin-bottom: 1.5rem; }
.ld-upgrade-prompt h2 { font-size: var(--ld-font-size-2xl); font-weight: 700; margin-bottom: 1rem; color: var(--ld-gray-900); }
.ld-upgrade-prompt > p { color: var(--ld-gray-600); margin-bottom: 1rem; }
.ld-upgrade-features-list { list-style: none; padding: 0; margin: 1.5rem 0; text-align: left; }
.ld-upgrade-features-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0; color: var(--ld-gray-700); font-size: var(--ld-font-size-control); }
.ld-upgrade-features-list svg { color: var(--ld-success); flex-shrink: 0; }
.ld-leads-dashboard { display: flex; flex-direction: column; gap: 0; }
.ld-leads-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; }
.ld-stat-card { background: white; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-sm); padding: 1.5rem; text-align: center; }
.ld-stat-card-highlight { border-color: var(--ld-primary); background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(99, 102, 241, 0.1) 100%); }
.ld-stat-value { font-size: var(--ld-font-size-display-sm); font-weight: 700; color: var(--ld-gray-900); margin-bottom: 0.25rem; }
.ld-stat-card-highlight .ld-stat-value { color: var(--ld-primary); }
.ld-stat-label { font-size: var(--ld-font-size-muted); color: var(--ld-gray-500); }
.ld-leads-empty { text-align: center; padding: 3rem 2rem; }
.ld-leads-empty-icon { color: var(--ld-gray-400); margin-bottom: 1rem; }
.ld-leads-empty h3 { font-size: var(--ld-font-size-lg); font-weight: 600; margin-bottom: 0.5rem; color: var(--ld-gray-900); }
.ld-leads-empty p { color: var(--ld-gray-600); max-width: 400px; margin: 0 auto; }
.ld-empty-state { text-align: center; padding: 3rem; }
.ld-empty-icon { color: var(--ld-gray-400); margin-bottom: 1rem; }
.ld-empty-state h2 { font-size: var(--ld-font-size-xl); font-weight: 600; margin-bottom: 0.5rem; color: var(--ld-gray-900); }
.ld-empty-state p { color: var(--ld-gray-600); margin-bottom: 1.5rem; }
.ld-leads-list { display: flex; flex-direction: column; background: white; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-sm); overflow: hidden; }
.ld-leads-table-header,
.ld-lead-item {
    display: grid;
    grid-template-columns: 8px minmax(0, 1fr) 116px 136px;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.325rem 1.625rem;
}
.ld-leads-table-header {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    background: var(--ld-gray-50);
    border-bottom: 1px solid var(--ld-border);
    font-size: var(--ld-font-size-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ld-gray-500);
}
.ld-lead-item { background: white; border-top: 1px solid var(--ld-border); border-radius: 0; transition: background 0.12s; }
.ld-lead-origin { display: flex; align-items: flex-start; justify-content: flex-start; padding-top: 2px; }
.ld-lead-item:hover { background: var(--ld-gray-50); }
.ld-lead-item[data-status="archived"] { opacity: 0.55; }
.ld-lead-status-indicator { width: 8px; height: 8px; border-radius: 50%; background: var(--ld-gray-300); margin-top: 6px; flex-shrink: 0; }
.ld-lead-status-indicator.ld-lead-new { background: var(--ld-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2); }
.ld-lead-status-indicator.ld-lead-contacted { background: #16a34a; box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2); }
.ld-lead-content { flex: 1; min-width: 0; }
.ld-lead-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.ld-lead-name { font-weight: 600; color: var(--ld-gray-900); display: flex; align-items: center; gap: 0.5rem; }
.ld-lead-badge-new { padding: 2px 6px; font-size: var(--ld-font-size-micro); font-weight: 600; text-transform: uppercase; background: var(--ld-primary); color: white; border-radius: 4px; }
.ld-lead-badge-contacted { padding: 2px 6px; font-size: var(--ld-font-size-micro); font-weight: 600; text-transform: uppercase; background: #dcfce7; color: #16a34a; border-radius: 4px; }
.ld-lead-date { display: flex; align-items: center; gap: 0.375rem; font-size: var(--ld-font-size-xs); color: var(--ld-gray-500); }
.ld-lead-contact { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.5rem; }
.ld-lead-contact a { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--ld-font-size-muted); color: var(--ld-gray-600); text-decoration: none; }
.ld-lead-contact a:hover { color: var(--ld-primary); }
.ld-lead-message { font-size: var(--ld-font-size-control); color: var(--ld-gray-700); padding: 0.5rem 0 0 0; margin-top: 0.25rem; }
.ld-lead-custom-fields { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.375rem; }
.ld-lead-custom-tag { display: inline-block; font-size: var(--ld-font-size-xs); background: var(--ld-sidebar-active-bg, #f0f0f0); color: var(--ld-gray-700); padding: 0.1875rem 0.5rem; border-radius: var(--ld-radius-sm, 4px); }
.ld-lead-custom-tag strong { font-weight: 600; color: var(--ld-gray-800); }
.ld-lead-actions { display: flex; justify-content: flex-end; gap: 0.5rem; }
.ld-lead-action-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; background: none; border: 1px solid #ccc; border-radius: var(--ld-radius-sm); cursor: pointer; color: var(--ld-gray-500); transition: all 0.15s; }
.ld-lead-action-btn:hover { background: var(--ld-sidebar-active-bg); color: var(--ld-gray-700); border-color: var(--ld-gray-300); 
border: 1px solid #BABABA;
}

.ld-seo-action-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; padding: 0.62rem; background: none; border: 1px solid #ccc; border-radius: var(--ld-radius-sm); cursor: pointer; color: var(--ld-gray-500); transition: all 0.15s; }
.ld-seo-action-btn:hover { background: var(--ld-sidebar-active-bg); color: var(--ld-gray-700); border-color: var(--ld-gray-300); 
border: 1px solid #BABABA;
}
.ld-seo-action-btn:active,
.ld-lead-action-btn:active {
background: #d2d2d2;
}
/* =====================================================
   PAGE: RESELLER DASHBOARD
   ===================================================== */
.ld-reseller-page { max-width: 1000px; margin: 0 auto; padding: 2rem 1rem; }
.ld-reseller-alert { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.25rem; border-radius: var(--ld-radius-lg); margin-bottom: 1.5rem; }
.ld-reseller-alert svg { width: 20px; height: 20px; flex-shrink: 0; }
.ld-reseller-alert--success { background: var(--ld-success-surface-alt); border: 1px solid var(--ld-success-border-soft); color: var(--ld-success-text); }
.ld-reseller-alert--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.ld-reseller-alert--warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.ld-reseller-hero { background: linear-gradient(135deg, var(--ld-accent) 0%, #7c3aed 100%); border-radius: var(--ld-radius-xl); padding: 2rem; color: #fff; margin-bottom: 1.5rem; }
.ld-reseller-hero-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.ld-reseller-hero-top h1 { font-size: var(--ld-font-size-2xl); font-weight: 700; margin: 0 0 0.25rem; }
.ld-reseller-hero-top p { font-size: var(--ld-font-size-sm); opacity: 0.85; margin: 0; }
.ld-reseller-primary-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; color: var(--ld-accent); font-weight: 600; padding: 0.75rem 1.25rem; border-radius: var(--ld-radius-lg); border: none; cursor: pointer; font-size: var(--ld-font-size-muted); transition: transform 0.15s, box-shadow 0.15s; }
.ld-reseller-primary-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.ld-reseller-primary-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ld-reseller-primary-btn svg { width: 18px; height: 18px; }
.ld-reseller-credits-card { background: rgba(255,255,255,0.15); border-radius: var(--ld-radius-lg); padding: 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ld-reseller-credits-main { display: flex; align-items: baseline; gap: 0.5rem; }
.ld-reseller-credits-number { font-size: var(--ld-font-size-display-lg); font-weight: 700; line-height: 1; }
.ld-reseller-credits-label { font-size: var(--ld-font-size-md); opacity: 0.9; }
.ld-reseller-buy-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(255,255,255,0.2); color: #fff; font-weight: 500; padding: 0.75rem 1rem; border-radius: var(--ld-radius-md); border: 1px solid rgba(255,255,255,0.3); cursor: pointer; font-size: var(--ld-font-size-muted); transition: background 0.15s; }
.ld-reseller-buy-btn:hover { background: rgba(255,255,255,0.3); }
.ld-reseller-buy-btn svg { width: 16px; height: 16px; }
.ld-reseller-stats { display: flex; gap: 2rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.2); }
.ld-reseller-stat { text-align: center; }
.ld-reseller-stat-val { display: block; font-size: var(--ld-font-size-2xl); font-weight: 700; }
.ld-reseller-stat-label { font-size: var(--ld-font-size-xs); opacity: 0.8; }
.ld-reseller-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--ld-gray-200); }
.ld-reseller-tab { padding: 0.75rem 1rem; background: none; border: none; font-size: var(--ld-font-size-muted); font-weight: 500; color: var(--ld-gray-500); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; }
.ld-reseller-tab:hover { color: var(--ld-gray-700); }
.ld-reseller-tab.active { color: var(--ld-accent); border-bottom-color: var(--ld-accent); }
.ld-reseller-empty { text-align: center; padding: 3rem 1rem; background: var(--ld-gray-50); border-radius: var(--ld-radius-lg); }
.ld-reseller-empty svg { width: 48px; height: 48px; color: var(--ld-gray-400); margin-bottom: 1rem; }
.ld-reseller-empty h3 { font-size: var(--ld-font-size-md); font-weight: 600; margin: 0 0 0.5rem; color: var(--ld-gray-700); }
.ld-reseller-empty p { font-size: var(--ld-font-size-sm); color: var(--ld-gray-500); margin: 0 0 1rem; }
.ld-reseller-btn { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--ld-accent); color: #fff; font-weight: 500; padding: 0.625rem 1rem; border-radius: var(--ld-radius-md); border: none; cursor: pointer; font-size: var(--ld-font-size-muted); }
.ld-reseller-btn:hover { background: var(--ld-accent-700); }
.ld-reseller-btn--outline { background: #fff; color: var(--ld-gray-700); border: 1px solid var(--ld-gray-200); }
.ld-reseller-btn--outline:hover { background: var(--ld-gray-50); }
.ld-reseller-btn svg { width: 16px; height: 16px; }
.ld-reseller-sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.ld-reseller-site-card { background: #fff; border: 1px solid var(--ld-gray-200); border-radius: var(--ld-radius-lg); padding: 1.25rem; }
.ld-reseller-site-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.75rem; }
.ld-reseller-site-header h3 { font-size: var(--ld-font-size-md); font-weight: 600; margin: 0; color: var(--ld-gray-900); }
.ld-reseller-site-status { font-size: var(--ld-font-size-2xs); font-weight: 500; padding: 0.25rem 0.5rem; border-radius: var(--ld-radius-sm); white-space: nowrap; }
.ld-reseller-site-status--active { background: var(--ld-success-bg-soft); color: var(--ld-success-text); }
.ld-reseller-site-status--pending, .ld-reseller-site-status--creating, .ld-reseller-site-status--deploying { background: #fef3c7; color: #92400e; }
.ld-reseller-site-status--error { background: #fee2e2; color: #991b1b; }
.ld-reseller-site-client { font-size: var(--ld-font-size-sm); color: var(--ld-gray-600); margin: 0 0 0.25rem; }
.ld-reseller-site-date { font-size: var(--ld-font-size-xs); color: var(--ld-gray-500); margin: 0 0 1rem; }
.ld-reseller-site-actions { display: flex; gap: 0.5rem; }
.ld-reseller-site-btn { flex: 1; text-align: center; padding: 0.5rem 0.75rem; font-size: var(--ld-font-size-sm); font-weight: 500; border-radius: var(--ld-radius-md); background: var(--ld-accent); color: #fff; text-decoration: none; transition: background 0.15s; }
.ld-reseller-site-btn:hover { background: var(--ld-accent-700); }
.ld-reseller-site-btn--outline { background: #fff; color: var(--ld-gray-700); border: 1px solid var(--ld-gray-200); }
.ld-reseller-site-btn--outline:hover { background: var(--ld-gray-50); }
.ld-reseller-site-btn--disabled { background: var(--ld-gray-100); color: var(--ld-gray-400); cursor: default; }
.ld-reseller-history { display: flex; flex-direction: column; gap: 0.5rem; }
.ld-reseller-history-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: #fff; border: 1px solid var(--ld-gray-100); border-radius: var(--ld-radius-md); }
.ld-reseller-history-icon { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ld-reseller-history-icon svg { width: 16px; height: 16px; }
.ld-reseller-history-icon--plus { background: var(--ld-success-bg-soft); color: var(--ld-success-dark); }
.ld-reseller-history-icon--minus { background: #fee2e2; color: #dc2626; }
.ld-reseller-history-content { flex: 1; min-width: 0; }
.ld-reseller-history-text { display: block; font-size: var(--ld-font-size-muted); color: var(--ld-gray-800); }
.ld-reseller-history-desc { display: block; font-size: var(--ld-font-size-xs); color: var(--ld-gray-500); margin-top: 0.125rem; }
.ld-reseller-history-date { font-size: var(--ld-font-size-xs); color: var(--ld-gray-400); }
.ld-reseller-history-amount { font-weight: 600; font-size: var(--ld-font-size-muted); }
.ld-reseller-history-amount--plus { color: var(--ld-success-dark); }
.ld-reseller-history-amount--minus { color: #dc2626; }
.ld-reseller-modal { position: fixed; inset: 0; z-index: var(--ld-z-modal); display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ld-reseller-modal-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); }
.ld-reseller-modal-content { position: relative; background: #fff; border-radius: var(--ld-radius-xl); padding: 2rem; max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto; }
.ld-reseller-modal-content--wide { max-width: 600px; }
.ld-reseller-modal-close { position: absolute; top: 1rem; right: 1rem; width: 32px; height: 32px; border: none; background: var(--ld-gray-100); border-radius: 50%; font-size: var(--ld-font-size-xl); cursor: pointer; color: var(--ld-gray-500); }
.ld-reseller-modal-close:hover { background: var(--ld-gray-200); }
.ld-reseller-modal-content h2 { font-size: var(--ld-font-size-xl); font-weight: 600; margin: 0 0 0.5rem; }
.ld-reseller-modal-desc { font-size: var(--ld-font-size-sm); color: var(--ld-gray-500); margin: 0 0 1.5rem; }
.ld-reseller-packs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ld-reseller-pack { border: 1px solid var(--ld-gray-200); border-radius: var(--ld-radius-lg); padding: 1.25rem; text-align: center; transition: border-color 0.15s; }
.ld-reseller-pack:hover { border-color: var(--ld-accent); }
.ld-reseller-pack-header { margin-bottom: 0.5rem; }
.ld-reseller-pack-name { display: block; font-size: var(--ld-font-size-2xs); font-weight: 600; color: var(--ld-gray-500); text-transform: uppercase; letter-spacing: 0.05em; }
.ld-reseller-pack-credits { display: block; font-size: var(--ld-font-size-xl); font-weight: 700; color: var(--ld-gray-900); }
.ld-reseller-pack-price { font-size: var(--ld-font-size-2xl); font-weight: 700; color: var(--ld-accent); margin-bottom: 0.25rem; }
.ld-reseller-pack-per-credit { font-size: var(--ld-font-size-xs); color: var(--ld-gray-500); margin-bottom: 1rem; }
.ld-reseller-pack-btn { width: 100%; padding: 0.625rem; background: var(--ld-accent); color: #fff; border: none; border-radius: var(--ld-radius-md); font-weight: 500; font-size: var(--ld-font-size-muted); cursor: pointer; }
.ld-reseller-pack-btn:hover { background: var(--ld-accent-700); }
.ld-reseller-pack-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ld-reseller-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ld-reseller-form-group { display: flex; flex-direction: column; gap: 0.375rem; }
.ld-reseller-form-group--full { grid-column: 1 / -1; }
.ld-reseller-form-group label { font-size: var(--ld-font-size-sm); font-weight: 500; color: var(--ld-gray-700); }
.ld-reseller-form-group input, .ld-reseller-form-group textarea { padding: 0.625rem 0.75rem; border: 1px solid var(--ld-gray-200); border-radius: var(--ld-radius-md); font-size: var(--ld-font-size-control); }
.ld-reseller-form-group input:focus, .ld-reseller-form-group textarea:focus { outline: none; border-color: var(--ld-gray-400); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.ld-reseller-form-help { font-size: var(--ld-font-size-xs); color: var(--ld-gray-500); }
.ld-reseller-form-footer { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--ld-gray-100); }
@media (max-width: 600px) { .ld-reseller-hero-top { flex-direction: column; } .ld-reseller-credits-card { flex-direction: column; text-align: center; } .ld-reseller-credits-main { flex-direction: column; gap: 0.25rem; } .ld-reseller-stats { justify-content: center; } .ld-reseller-packs { grid-template-columns: 1fr; } .ld-reseller-form-grid { grid-template-columns: 1fr; } }

/* =====================================================
   PAGE: PUBLICAR
   ===================================================== */
:root { --pub-primary: #6366F1; --pub-primary-dark: #4F46E5; --pub-success: var(--ld-success); --pub-error: #EF4444; --pub-warning: #F59E0B; --pub-gray-50: #F9FAFB; --pub-gray-100: #F3F4F6; --pub-gray-200: #E5E7EB; --pub-gray-300: #D1D5DB; --pub-gray-400: #9CA3AF; --pub-gray-500: #6B7280; --pub-gray-600: #4B5563; --pub-gray-700: #374151; --pub-gray-800: #1F2937; --pub-gray-900: #111827; }
.pub-page { background: var(--ld-page-bg); padding: 0.75rem 1rem 4rem; }
.pub-container { max-width: 780px; margin: 0 auto; }

/* ===== Checkout chrome (distraction-free layout) ===== */
.ld-checkout-body { background: var(--ld-page-bg); margin: 0; }
.ld-checkout-shell { min-height: 100vh; display: flex; flex-direction: column; }
.ld-checkout-brand { display: flex; justify-content: center; align-items: center; padding: 1.75rem 1rem 0.5rem; margin-bottom: 1rem; background: var(--ld-page-bg); }
.ld-brand-logo--checkout { display: inline-flex; align-items: center; }
.ld-brand-logo--checkout .ld-brand-logo-img { max-width: 168px; height: auto; display: block; }
.ld-checkout-main { flex: 1; }
@media (max-width: 560px) {
    .ld-checkout-brand { padding: 1.25rem 1rem 0.25rem; }
}

/* ===== Step 2: plan head (title + billing toggle) ===== */
.pub-step2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; flex-wrap: wrap; }
.pub-step2-head .pub-billing-toggle { margin: 0; flex-shrink: 0; }

/* ===== Top back link (above card, on gray background) ===== */
.pub-step-nav { margin-bottom: 0.75rem; }
.pub-footer-note { margin: 1rem 0 0; text-align: center; font-size: var(--ld-font-size-sm); color: var(--pub-gray-500); line-height: 1.4; }
.pub-step-top-back { display: inline-flex; align-items: center; gap: 0.35rem; background: transparent; border: none; padding: 0; margin: 0; color: var(--ld-gray-500); font-size: var(--ld-font-size-xs); font-weight: 500; cursor: pointer; text-decoration: none; transition: color .15s ease; }
.pub-step-top-back svg { width: 16px; height: 16px; flex-shrink: 0; }
.pub-step-top-back:hover { color: var(--ld-gray-900); }

/* ===== Inline step actions ===== */
.pub-step-actions { display: flex; gap: 0.75rem; margin-top: 1.75rem; }
.pub-step-actions > .pub-btn { flex: 1; padding-top: 0.7rem; padding-bottom: 0.7rem; font-size: var(--ld-font-size-control); }
.pub-step-actions--forward { justify-content: flex-end; }
.pub-step-actions--forward > .pub-btn { flex: 0 1 auto; min-width: 160px; }

/* ===== Per-card plan CTA ===== */
.pub-plan-cta { width: 100%; margin-top: 1.5rem; padding: 0.75rem 1.25rem; font-size: var(--ld-font-size-control); }
.pub-plan-secure { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin: 0.85rem 0 0; font-size: var(--ld-font-size-micro); color: #888888; line-height: 1.3; text-align: center; letter-spacing: 0.04em; }
.pub-plan-secure svg { width: 12px; height: 12px; flex-shrink: 0; opacity: 0.9; }
.pub-btn-fullrow { width: 100%; margin-top: 1.5rem; padding: 0.7rem 1.25rem; }

/* The outer card is just a wrapper; every step is its own card at the same width. */
.pub-card { background: transparent; border: none; padding: 0; }
.pub-step { display: none; background: var(--ld-content-bg); border: 1px solid var(--ld-border); border-radius: var(--ld-radius-lg); padding: 2rem; }
.pub-step.active { display: block; }
.pub-step.active.pub-step-anim-forward { animation: pubStepInFwd 0.18s ease-out both; }
.pub-step.active.pub-step-anim-back { animation: pubStepInBack 0.18s ease-out both; }
@keyframes pubStepInFwd {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes pubStepInBack {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .pub-step.active.pub-step-anim-forward,
    .pub-step.active.pub-step-anim-back { animation: none; }
}
.pub-step-title { font-size: var(--ld-font-size-xl); font-weight: 600; color: var(--pub-gray-900); margin: 0 0 0.5rem; }
.pub-step-desc { color: var(--pub-gray-500); font-size: var(--ld-font-size-sm); margin: 0 0 1.75rem; }
.pub-step-desc--inline { margin-bottom: 0; }
.pub-tabs { display: flex; margin-bottom: 1.5rem; background: var(--ld-gray-100); border-radius: var(--ld-radius-sm); padding: 4px; }
.pub-tab { flex: 1; padding: 0.4rem 0.925rem; border: none; background: transparent; border-radius: calc(var(--ld-radius-sm) - 2px); font-size: var(--ld-font-size-sm); font-weight: 500; color: var(--ld-gray-500); cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.pub-tab:hover { color: var(--ld-gray-800); }
.pub-tab.active { background: #fff; color: var(--ld-gray-900); font-weight: 500; box-shadow: 0 0.6px 0.6px -1.25px rgba(0, 0, 0, 0.07), 0 2.3px 2.3px -2.5px rgba(0, 0, 0, 0.06), 0 10px 10px -3.75px rgba(0, 0, 0, 0.03); }
.pub-tab-content { display: none; }
.pub-tab-content.active { display: block; }
.pub-domain-input-wrap { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.pub-domain-input { flex: 1; padding: 0.625rem 0.875rem; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-md); font-size: var(--ld-font-size-sm); outline: none; transition: border-color 0.15s, box-shadow 0.15s; background: var(--ld-content-bg); color: var(--ld-gray-900); }
.pub-domain-input:focus { outline: none; border-color: var(--ld-gray-400); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.pub-domain-select { padding: 0.625rem 0.875rem; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-md); font-size: var(--ld-font-size-sm); background: var(--ld-content-bg); color: var(--ld-gray-900); cursor: pointer; }
.pub-domain-status { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 8px; font-size: var(--ld-font-size-muted); margin-bottom: 1rem; }
.pub-domain-status.checking { background: var(--pub-gray-100); color: var(--pub-gray-600); }
.pub-domain-status.available { background: var(--ld-success-bg-soft); color: var(--ld-success-text); }
.pub-domain-status.unavailable { background: #FEE2E2; color: #991B1B; }
.pub-domain-status.warning { background: #FEF3C7; color: #92400E; }
.pub-domain-warning { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem; border-radius: 8px; font-size: var(--ld-font-size-muted); margin-top: 1rem; background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.pub-domain-warning .warning-icon { font-size: var(--ld-font-size-xl); flex-shrink: 0; }
.pub-domain-warning .warning-text { line-height: 1.5; }
.pub-dns-box { background: var(--ld-gray-50); border: 1px solid var(--ld-border); border-radius: var(--ld-radius-md); padding: 1rem; margin: 1rem 0; }
.pub-dns-box h4 { font-size: var(--ld-font-size-muted); font-weight: 600; margin: 0 0 0.75rem; color: var(--pub-gray-800); }
.pub-dns-intro { font-size: var(--ld-font-size-muted); color: var(--pub-gray-500); margin: 0 0 0.75rem; line-height: 1.5; }
.pub-dns-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--pub-gray-200); font-size: var(--ld-font-size-muted); }
.pub-dns-row:last-child { border-bottom: none; }
.pub-dns-label { color: var(--pub-gray-500); }
.pub-dns-value { font-family: monospace; color: var(--pub-gray-900); font-weight: 500; }
.pub-dns-note { font-size: var(--ld-font-size-muted); color: var(--pub-gray-500); margin-top: 0.75rem; line-height: 1.5; }
.pub-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 0; }
.pub-plan { display: flex; flex-direction: column; border: 1.5px solid var(--ld-border); border-radius: var(--ld-radius-lg); padding: 1.375rem 1.375rem 1.5rem; transition: border-color .15s ease, box-shadow .15s ease; background: var(--ld-content-bg); position: relative; }
.pub-plan-header { display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; margin-bottom: 0.25rem; }
.pub-plan-name { font-weight: 600; font-size: var(--ld-font-size-xl); color: var(--ld-gray-900); margin-bottom: 0.3rem; }
.pub-plan-price { text-align: left; }
.pub-plan-price-amount { font-size: var(--ld-font-size-3xl); font-weight: 700; color: var(--ld-gray-900); }
.pub-plan-billed-yearly { font-size: var(--ld-font-size-xs); color: #6b7280; line-height: 1.4; margin: 0 0 8px; }
.pub-plan-price-period { font-size: var(--ld-font-size-muted); color: var(--ld-gray-500); }
.pub-plan-features { list-style: none; padding: 0; margin: 0.75rem 0 0; font-size: var(--ld-font-size-sm); color: #4b5563; }
.pub-plan-features li { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.25rem 0; line-height: 1.4; font-size: var(--ld-font-size-sm); }
.pub-plan-features svg { width: 14px; height: 14px; color: #1a1a1a; flex-shrink: 0; margin-top: 3px; }
.pub-plan-ia-badge { display: inline-block; font-size: var(--ld-font-size-micro); font-weight: 600; padding: 2px 4px; border-radius: 4px; letter-spacing: 0.03em; line-height: 1.2; flex-shrink: 0; color: #1a1a1a; border: 1px solid var(--ld-border, #d7d8db); margin-left: 2px; }
@media (max-width: 520px) { .pub-plans { grid-template-columns: 1fr; } }
.pub-billing-toggle { display: inline-flex; justify-content: center; margin-bottom: 1.5rem; background: var(--ld-gray-100); border-radius: var(--ld-radius-sm); padding: 4px; margin-left: auto; margin-right: auto; }
.pub-cycle-btn { flex: 1; min-width: 100px; padding: 0.4rem 0.925rem; border: none; background: transparent; border-radius: calc(var(--ld-radius-sm) - 2px); font-size: var(--ld-font-size-sm); font-weight: 500; color: var(--ld-gray-500); cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; }
.pub-cycle-btn:hover { color: var(--ld-gray-800); }
.pub-cycle-btn.active { background: #fff; color: var(--ld-gray-900); font-weight: 500; box-shadow: 0 0.6px 0.6px -1.25px rgba(0, 0, 0, 0.07), 0 2.3px 2.3px -2.5px rgba(0, 0, 0, 0.06), 0 10px 10px -3.75px rgba(0, 0, 0, 0.03); }
.pub-cycle-btn .badge { background: var(--ld-accent); color: white; font-size: var(--ld-font-size-micro); padding: 2px 5px; border-radius: var(--ld-radius-sm); margin-left: 4px; }
.pub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border: none; border-radius: var(--ld-radius-md); font-size: var(--ld-font-size-sm); font-weight: 600; cursor: pointer; transition: all 0.15s; text-decoration: none; }
.pub-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pub-btn-primary { background: var(--ld-accent); color: white; }
.pub-btn-primary:hover:not(:disabled) { background: var(--ld-accent-dark); }
.pub-btn-secondary { background: transparent; color: var(--ld-gray-600); border: none; }
.pub-btn-secondary:hover:not(:disabled) { background: var(--ld-gray-100); color: var(--ld-gray-800); }
.pub-btn-test { background: var(--ld-gray-800); color: white; }
.pub-btn-test:hover:not(:disabled) { background: var(--ld-gray-900); }
/* Order summary panel (sits inside the step card, below the plans) */
.pub-summary { background: var(--ld-gray-50); border: 1px solid var(--ld-border); border-radius: var(--ld-radius-lg); padding: 1.5rem; margin-top: 1.5rem; }
.pub-summary-trust { background: var(--ld-content-bg); }
.pub-summary-head { display: flex; align-items: center; gap: 0.5rem; font-size: var(--ld-font-size-2xs); font-weight: 600; color: var(--ld-gray-500); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.125rem; }
.pub-summary-head svg { width: 16px; height: 16px; color: var(--ld-gray-400); }
.pub-summary-rows { display: flex; flex-direction: column; gap: 0.625rem; }
.pub-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: var(--ld-font-size-muted); }
.pub-summary-label { color: var(--ld-gray-500); flex-shrink: 0; }
.pub-summary-value { color: var(--ld-gray-900); font-weight: 500; text-align: right; word-break: break-word; }
.pub-summary-total { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-top: 1.125rem; padding-top: 1.125rem; border-top: 1px solid var(--ld-border); }
.pub-summary-total-label { font-size: var(--ld-font-size-control); font-weight: 600; color: var(--ld-gray-900); padding-top: 0.25rem; }
.pub-summary-total-price { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.pub-summary-total-amount { font-size: var(--ld-font-size-2xl); font-weight: 700; color: var(--ld-gray-900); letter-spacing: -0.01em; }
.pub-summary-total-note { font-size: var(--ld-font-size-2xs); color: var(--ld-gray-500); margin-top: 3px; }
.pub-summary-trust { display: flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; padding: 0.625rem 0.875rem; background: var(--ld-gray-50); border-radius: var(--ld-radius-sm); font-size: var(--ld-font-size-xs); font-weight: 500; color: var(--ld-gray-600); }
.pub-summary-trust svg { width: 15px; height: 15px; color: var(--ld-gray-500); flex-shrink: 0; }
.pub-summary-reassure { margin: 0.75rem 0 0; text-align: center; font-size: var(--ld-font-size-2xs); color: var(--ld-gray-400); }
.pub-actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.pub-actions-right { display: flex; gap: 0.75rem; }
/* Deploy step uses the modern onboarding (ob-gen2) progress UI, full width in the card */
.pub-deploy-wrap { padding: 0; }
.pub-gen2.ob-gen2 { max-width: none; width: 100%; padding: 0; }
.pub-gen2 .ob-gen2-bar-fill { background: var(--ld-accent); }
.pub-gen2 .ob-gen2-step.active .ob-gen2-dot { background: var(--ld-accent); }
.pub-gen2 .ob-gen2-step.error { background: #FEF2F2; }
.pub-gen2 .ob-gen2-step.error .ob-gen2-dot { background: #EF4444; animation: none; }
.pub-gen2 .ob-gen2-step.error .ob-gen2-step-label { color: #B91C1C; font-weight: 600; }

/* Overlay de confirmación de pago sobre el paso de deploy */
.pub-step-overlay-host { position: relative; }
.pub-payment-flash { position: absolute; inset: 0; z-index: 20; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; border-radius: var(--ld-radius-lg); opacity: 1; transition: opacity 0.45s ease; }
.pub-payment-flash.is-hiding { opacity: 0; pointer-events: none; }
.pub-payment-flash.is-hidden { display: none; }
.pub-payment-flash-inner { text-align: center; padding: 1rem; animation: pubFlashPop 0.35s ease; }
.pub-payment-flash-icon { width: 72px; height: 72px; border-radius: 50%; background: var(--ld-success-gradient); display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; box-shadow: 0 8px 24px var(--ld-success-shadow); color: #fff; }
.pub-payment-flash-icon svg { width: 36px; height: 36px; }
.pub-payment-flash-title { font-size: var(--ld-font-size-xl); font-weight: 700; color: var(--pub-gray-900); margin: 0; }
.pub-payment-flash-sub { font-size: var(--ld-font-size-sm); color: var(--pub-gray-500); margin: 0.35rem 0 0; }
@keyframes pubFlashPop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .pub-payment-flash-inner { animation: none; } }

.pub-deploy-progress { text-align: center; padding: 2.5rem 0; display: flex; flex-direction: column; align-items: center; }
.pub-deploy-spinner { width: 48px; height: 48px; border: 3px solid var(--ld-gray-200); border-top-color: var(--ld-accent); border-radius: 50%; animation: pubSpin 0.8s linear infinite; margin-bottom: 1.5rem; }
.pub-deploy-bar { width: 100%; max-width: 320px; height: 6px; background: var(--ld-gray-200); border-radius: 3px; overflow: hidden; margin-bottom: 0.25rem; }
.pub-deploy-bar-fill { height: 100%; background: var(--ld-accent); border-radius: 3px; transition: width 0.5s ease; width: 0%; }
.pub-deploy-bar-pct { font-size: var(--ld-font-size-2xs); color: var(--ld-gray-500); margin-bottom: 1.5rem; }
.pub-deploy-steps { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; max-width: 380px; margin: 1.5rem auto 0; text-align: left; }
.pub-deploy-step { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--ld-radius-md); background: var(--ld-gray-50); border: 1px solid var(--ld-border); transition: all 0.3s; position: relative; }
.pub-deploy-step.active { background: var(--ld-accent-50); border-color: var(--ld-accent-200); }
.pub-deploy-step.done { background: var(--ld-success-surface); border-color: var(--ld-success-border); }
.pub-deploy-step.error { background: #FEF2F2; border-color: #FECACA; }
.pub-deploy-step-icon { width: 28px; height: 28px; border-radius: 50%; background: var(--ld-gray-200); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--ld-gray-500); }
.pub-deploy-step.active .pub-deploy-step-icon { background: var(--ld-accent); color: white; animation: pubPulse 1.5s ease-in-out infinite; }
.pub-deploy-step.done .pub-deploy-step-icon { background: var(--ld-success-dark); color: white; }
.pub-deploy-step.error .pub-deploy-step-icon { background: var(--ld-danger, #DC2626); color: white; }
.pub-deploy-step-label { font-size: var(--ld-font-size-sm); color: var(--ld-gray-600); flex: 1; }
.pub-deploy-step.active .pub-deploy-step-label { color: var(--ld-accent); font-weight: 500; }
.pub-deploy-step.done .pub-deploy-step-label { color: #15803D; font-weight: 500; }
.pub-deploy-step.error .pub-deploy-step-label { color: var(--ld-danger, #DC2626); font-weight: 500; }
.pub-deploy-step-check { width: 20px; height: 20px; border-radius: 50%; background: var(--ld-success-dark); display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0; transform: scale(0.5); transition: all 0.3s ease; }
.pub-deploy-step.done .pub-deploy-step-check { opacity: 1; transform: scale(1); }
@keyframes pubPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); } 50% { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); } }
.pub-celebration { text-align: center; padding: 2rem 0; max-width: 480px; margin: 0 auto; }
.pub-celebration-icon { width: 72px; height: 72px; background: var(--ld-success-gradient); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; box-shadow: 0 8px 24px var(--ld-success-shadow); color: white; }
.pub-celebration-icon svg { width: 36px; height: 36px; }
.pub-celebration-icon--amber { background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%); color: #78350F; }
.pub-celebration h2 { font-size: var(--ld-font-size-2xl); font-weight: 700; color: var(--pub-gray-900); margin: 0 0 1rem; }
.pub-celebration p { color: var(--pub-gray-500); margin: 0 0 1rem; line-height: 1.55; }
.pub-celebration p:last-of-type { margin-bottom: 0; }
.pub-celebration-actions { margin-top: 1.5rem; display: flex; justify-content: center; }
.pub-celebration-url { display: inline-flex; align-items: center; gap: 0.5rem; background: var(--pub-gray-100); padding: 0.75rem 1.25rem; border-radius: 8px; font-family: monospace; font-size: var(--ld-font-size-control); color: var(--pub-primary); margin-bottom: 1.5rem; }
.pub-error-box { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px; padding: 1rem; margin: 1rem 0; text-align: left; }
.pub-error-box h4 { color: #991B1B; font-size: var(--ld-font-size-muted); margin: 0 0 0.5rem; }
.pub-error-box p { color: #7F1D1D; font-size: var(--ld-font-size-xs); margin: 0; }
@keyframes pubSpin { to { transform: rotate(360deg); } }
.pub-spin { animation: pubSpin 1s linear infinite; }
@media (max-width: 640px) { .pub-step { padding: 1.5rem; } .pub-domain-input-wrap { flex-direction: column; } .pub-actions { flex-direction: column; } .pub-actions-right { flex-direction: column; } }

/* =====================================================
   UPSELL: catálogo automático (post-deploy, plan Presencia)
   ===================================================== */
.pub-upsell { text-align: left; }
.pub-upsell-intro { color: #171717; font-size: var(--ld-font-size-base); line-height: 1.55; margin: 1rem 0 0.75rem; }
.pub-upsell-intro strong { color: #171717; font-weight: 600; }
.pub-upsell-plan-line { color: #171717; font-size: var(--ld-font-size-base); line-height: 1.5; margin: 0 0 1.25rem; }
.pub-upsell-benefits { list-style: none; padding: 0; margin: 0 0 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; color: #171717; }
.pub-upsell-benefits li { display: flex; align-items: flex-start; gap: 0.5rem; color: #171717; font-size: var(--ld-font-size-base); line-height: 1.4; }
.pub-upsell-benefits svg { width: 14px; height: 14px; color: #1a1a1a; flex-shrink: 0; margin-top: 3px; }
.pub-upsell-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.pub-upsell-actions .pub-btn-primary { min-width: 190px; }
.pub-upsell-demo { display: inline-flex; align-items: center; margin-top: 1.25rem; padding: 0; border: none; background: none; color: var(--ld-gray-500); font-family: inherit; font-size: var(--ld-font-size-xs); font-weight: 500; cursor: pointer; transition: color 0.15s; }
.pub-upsell-demo:hover { color: var(--ld-gray-800); }

/* Modal demo (namespaced para no chocar con .ld-modal global) */
.pub-demo-modal { position: fixed; inset: 0; z-index: var(--ld-z-modal); display: none; align-items: center; justify-content: center; padding: 1rem; }
.pub-demo-overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.45); backdrop-filter: blur(var(--ld-overlay-blur, 6px)); -webkit-backdrop-filter: blur(var(--ld-overlay-blur, 6px)); }
.pub-demo-box { position: relative; width: min(720px, 100%); background: var(--ld-content-bg); border: 1px solid var(--ld-border); border-radius: var(--ld-radius-xl); overflow: hidden; }
.pub-demo-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ld-border); }
.pub-demo-head h3 { margin: 0; font-size: var(--ld-font-size-lg); font-weight: 600; color: var(--ld-gray-900); }
.pub-demo-close { width: 32px; height: 32px; border: none; border-radius: var(--ld-radius-full); background: var(--ld-gray-100); color: var(--ld-gray-500); font-size: 1.2rem; line-height: 1; cursor: pointer; transition: background 0.15s; }
.pub-demo-close:hover { background: var(--ld-gray-200); }
.pub-demo-video { display: grid; place-items: center; min-height: 380px; padding: 2rem; text-align: center; color: #fff; background: linear-gradient(135deg, var(--ld-gray-900) 0%, #312e81 100%); }
.pub-demo-play { width: 68px; height: 68px; border-radius: var(--ld-radius-full); margin: 0 auto 1rem; display: grid; place-items: center; background: rgba(255, 255, 255, 0.95); color: var(--ld-accent-dark); }
.pub-demo-play svg { width: 28px; height: 28px; margin-left: 3px; }
.pub-demo-video h4 { margin: 0 0 0.5rem; font-size: var(--ld-font-size-xl); font-weight: 600; }
.pub-demo-video p { max-width: 460px; margin: 0 auto; color: rgba(255, 255, 255, 0.82); line-height: 1.5; font-size: var(--ld-font-size-sm); }
.pub-demo-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; padding: 1rem 1.25rem; border-top: 1px solid var(--ld-border); }
@media (max-width: 600px) {
    .pub-upsell-actions { flex-direction: column; align-items: stretch; }
    .pub-upsell-actions .pub-btn { width: 100%; }
}

/* =====================================================
   PAGE: CREAR SITIO
   ===================================================== */
.ld-limit-reached { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem; background: #FAFAFA; }
.ld-limit-card { background: white; border-radius: 8px; padding: 3rem; max-width: 600px; text-align: center; border: 1px solid var(--ld-border); }
.ld-limit-icon { font-size: var(--ld-font-size-display-lg); margin-bottom: 1rem; }
.ld-limit-card h1 { font-size: var(--ld-font-size-3xl); margin-bottom: 0.5rem; color: #1f2937; }
.ld-limit-card > p { color: #6b7280; margin-bottom: 2rem; }
.ld-upgrade-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.ld-upgrade-option { border: 1px solid var(--ld-border); border-radius: 8px; padding: 1.5rem; text-align: left; transition: all 0.2s ease; background: white; }
.ld-upgrade-option:hover { border-color: #171717; }
.ld-upgrade-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.ld-upgrade-header h3 { font-size: var(--ld-font-size-lg); margin: 0; }
.ld-upgrade-price { font-weight: 700; color: #6366F1; }
.ld-upgrade-option p { color: #6b7280; font-size: var(--ld-font-size-muted); margin-bottom: 1rem; }
.ld-back-link { color: #6b7280; text-decoration: none; }
.ld-back-link:hover { color: #6366F1; }
.ld-preview-container { background: #1f2937; border-radius: 8px; padding: 1rem; margin: 1.5rem 0; }
.ld-preview-frame-wrapper { background: white; border-radius: 8px; overflow: hidden; height: 500px; position: relative; }
.ld-preview-frame-wrapper iframe { width: 100%; height: 100%; border: none; }
.ld-variant-card { background: white; border: 1px solid var(--ld-border); border-radius: 8px; transition: all 0.2s ease; }
.ld-variant-card:hover { border-color: #171717; }
.ld-variants-grid { margin-bottom: 2rem; }
@media (max-width: 768px) { .ld-variants-grid { grid-template-columns: 1fr !important; gap: 1rem !important; } .ld-variant-preview { height: 200px !important; } }
@media (max-width: 900px) { .ld-search-row { grid-template-columns: 1fr !important; gap: 0.75rem !important; } .ld-search-row > div:nth-child(2) { display: none !important; } .ld-search-row #search-business-btn { width: 100%; justify-content: center; } }
@media (max-width: 600px) { #business-found-card > div { flex-direction: column !important; align-items: center !important; text-align: center !important; } #business-found-card #business-photo-container { margin-bottom: 1rem; } #business-found-card #business-found-address, #business-found-card #business-found-rating, #business-found-card #business-found-phone { justify-content: center !important; } }
.ld-progress-fill { height: 100%; background: #6366F1; border-radius: 4px; transition: width 0.3s ease; }
.ld-btn-link { background: none; border: none; cursor: pointer; font-size: var(--ld-font-size-sm); }
.ld-btn-link:hover { text-decoration: underline; }
.ld-billing-toggle-wizard .ld-cycle-btn { padding: 0.5rem 1rem; border: none; background: transparent; color: var(--ld-gray-500); font-size: var(--ld-font-size-xs); font-weight: 500; border-radius: 6px; cursor: pointer; transition: all 0.2s ease; display: inline-flex; align-items: center; }
.ld-billing-toggle-wizard .ld-cycle-btn:hover { color: var(--ld-gray-700); }
.ld-billing-toggle-wizard .ld-cycle-btn.active { background: white; color: var(--ld-gray-900); border: 1px solid var(--ld-border); font-weight: 600; }
.ld-plans .ld-plan { position: relative; padding: 1.5rem; border: 1px solid var(--ld-border); border-radius: 8px; cursor: pointer; transition: all 0.2s ease; text-align: center; background: white; }
.ld-plans .ld-plan:hover { border-color: #171717; }
.ld-plans .ld-plan.selected { border-color: var(--ld-primary); background: white; }
.ld-plans .ld-plan input[type="radio"] { display: none; }
.ld-wizard-content { border-radius: 8px; border: 1px solid var(--ld-border); padding: 2.5rem; }
.ld-wizard-steps { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.ld-wizard-step { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 6px; background: transparent; cursor: pointer; transition: all 0.2s ease; }
.ld-wizard-step .ld-wizard-step-number { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: var(--ld-font-size-xs); font-weight: 600; background: #FAFAFA; border: 1px solid var(--ld-border); color: #6B7280; transition: all 0.2s ease; }
.ld-wizard-step .ld-wizard-step-label { font-size: var(--ld-font-size-muted); font-weight: 500; color: #6B7280; transition: color 0.2s ease; }
.ld-wizard-step.active .ld-wizard-step-number { background: #171717; border-color: #171717; color: #fff; }
.ld-wizard-step.active .ld-wizard-step-label { color: #171717; font-weight: 600; }
.ld-wizard-step.completed .ld-wizard-step-number { background: #6366F1; border-color: #6366F1; color: #fff; font-size: 0; }
.ld-wizard-step.completed .ld-wizard-step-number::after { content: '✓'; font-size: var(--ld-font-size-xs); }
.ld-wizard-step.completed .ld-wizard-step-label { color: #171717; }
.ld-wizard.ld-wizard-expanded { max-width: 1100px; transition: max-width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.ld-wizard.ld-wizard-expanded .ld-wizard-content { padding: 1.5rem; }
.ld-design-showcase { max-width: 100%; margin: 0 auto; }
.ld-showcase-header { text-align: center; margin-bottom: 1.5rem; }
.ld-showcase-title { font-size: var(--ld-font-size-2xl); font-weight: 700; color: var(--ld-gray-900); margin: 0 0 0.5rem; }
.ld-showcase-subtitle { font-size: var(--ld-font-size-md); color: var(--ld-gray-500); margin: 0; }
.ld-style-selector { display: flex; justify-content: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }
.ld-style-pill { display: flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.25rem; background: white; border: 1px solid var(--ld-border); border-radius: 6px; cursor: pointer; transition: all 0.2s ease; font-size: var(--ld-font-size-sm); font-weight: 500; color: var(--ld-gray-600); }
.ld-style-pill:hover { border-color: #171717; color: #171717; }
.ld-style-pill.active { background: #6366F1; border-color: #6366F1; color: white; }
.ld-style-pill .ld-pill-check { display: none; font-weight: 700; }
.ld-style-pill.active .ld-pill-check { display: inline; }
.ld-device-toggle { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1rem; }
.ld-device-btn { display: flex; align-items: center; gap: 0.375rem; padding: 0.5rem 1rem; background: var(--ld-gray-100); border: none; border-radius: 6px; cursor: pointer; font-size: var(--ld-font-size-xs); color: var(--ld-gray-600); transition: all 0.2s ease; }
.ld-device-btn:hover { background: var(--ld-gray-200); }
.ld-device-btn.active { background: var(--ld-primary); color: white; }
.ld-device-btn svg { stroke-width: 1.5; }
.ld-browser-mockup { background: #FAFAFA; border-radius: 8px; overflow: hidden; border: 1px solid var(--ld-border); }
.ld-browser-bar { display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; background: white; }
.ld-browser-dots { display: flex; gap: 6px; }
.ld-browser-dots span { width: 12px; height: 12px; border-radius: 50%; background: #e5e7eb; }
.ld-browser-dots span:first-child { background: #fca5a5; }
.ld-browser-dots span:nth-child(2) { background: #fcd34d; }
.ld-browser-dots span:last-child { background: #86efac; }
.ld-browser-url { flex: 1; display: flex; align-items: center; gap: 0.5rem; background: var(--ld-gray-100); padding: 0.5rem 1rem; border-radius: 6px; font-size: var(--ld-font-size-xs); color: var(--ld-gray-600); }
.ld-browser-url svg { color: #22c55e; flex-shrink: 0; }
.ld-browser-fullscreen { padding: 0.5rem; background: none; border: none; cursor: pointer; color: var(--ld-gray-400); transition: color 0.2s ease; border-radius: 6px; }
.ld-browser-fullscreen:hover { background: var(--ld-gray-100); color: var(--ld-gray-700); }
.ld-preview-viewport { position: relative; background: white; min-height: 500px; transition: all 0.3s ease; }
.ld-preview-viewport.mobile-view { max-width: 375px; margin: 1rem auto; border-radius: 8px; border: 8px solid #1f2937; min-height: 667px; }
.ld-preview-loading-overlay { position: absolute; inset: 0; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; z-index: 10; }
.ld-preview-loading-overlay.hidden { display: none; }
.ld-preview-spinner { width: 40px; height: 40px; border: 3px solid var(--ld-gray-200); border-top-color: var(--ld-primary); border-radius: 50%; animation: ld-spin 1s linear infinite; }
.ld-showcase-cta { text-align: center; padding: 1.5rem; }
.ld-btn-use-design { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2.5rem; background: #6366F1; color: white; border: none; border-radius: 6px; font-size: var(--ld-font-size-lg); font-weight: 700; cursor: pointer; transition: all 0.2s ease; }
.ld-btn-use-design:hover { background: #4F46E5; }
.ld-cta-hint { margin: 0.75rem 0 0; font-size: var(--ld-font-size-muted); color: var(--ld-gray-500); }
@media (max-width: 768px) { .ld-style-selector { gap: 0.5rem; } .ld-style-pill { padding: 0.5rem 1rem; font-size: var(--ld-font-size-xs); } .ld-preview-viewport { min-height: 400px; } .ld-browser-url { display: none; } }
.ld-draft-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; z-index: var(--ld-z-modal); padding: 1rem; }
.ld-draft-modal-content { background: white; border-radius: 8px; padding: 2.5rem; max-width: 450px; text-align: center; border: 1px solid var(--ld-border); }
.ld-draft-icon { font-size: var(--ld-font-size-display-lg); margin-bottom: 1rem; }
.ld-draft-modal-content h2 { font-size: var(--ld-font-size-2xl); margin-bottom: 0.75rem; color: #1f2937; }
.ld-draft-modal-content p { color: #6b7280; margin-bottom: 1.5rem; }
.ld-draft-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.select2-container--default .select2-selection--single { height: 48px; padding: 8px 12px; border: 1px solid var(--ld-border); border-radius: 6px; font-size: var(--ld-font-size-md); background-color: #fff; transition: border-color 0.2s; }
.select2-container--default .select2-selection--single:hover { border-color: #171717; }
.select2-container--default.select2-container--focus .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--single { border-color: #171717; outline: none; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 28px; color: #374151; padding-left: 0; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9ca3af; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 46px; right: 10px; }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: #6b7280 transparent transparent transparent; }
.select2-dropdown { border: 1px solid var(--ld-border); border-radius: 6px; overflow: hidden; }
.select2-container--default .select2-search--dropdown .select2-search__field { padding: 10px 14px; border: 1px solid var(--ld-border); border-radius: 6px; margin: 8px; width: calc(100% - 16px); font-size: var(--ld-font-size-control); }
.select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: #171717; outline: none; }
.select2-results__options { max-height: 300px; overflow-y: auto; }
.select2-container--default .select2-results__option { padding: 10px 14px 10px 24px; font-size: var(--ld-font-size-control); color: #4b5563; }
.select2-container--default .select2-results__option[aria-disabled=true] { padding: 10px 14px 6px; font-weight: 600; color: #374151; font-size: var(--ld-font-size-xs); background: #F5F3FF; cursor: default; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: #EEF2FF; color: #4338CA; }
.select2-container--default .select2-results__option[aria-selected="true"] { background: #C7D2FE; color: #3730A3; }
.ai-suggestion-option { padding: 0.75rem; background: white; border: 1px solid var(--ld-border); border-radius: 8px; text-align: left; cursor: pointer; transition: all 0.2s; font-size: var(--ld-font-size-muted); color: #374151; line-height: 1.5; }
.ai-suggestion-option:hover { border-color: #171717; background: #FAFAFA; }
.ai-suggestion-option:active { background: #F5F5F5; }
@media (max-width: 640px) { .select2-container--default .select2-selection--single { height: 52px; padding: 10px 14px; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 30px; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px; } }

/* =====================================================
   PAGE: ONBOARDING (.ob-*)
   ===================================================== */
.ob { min-height: 100vh; display: flex; flex-direction: column; }
.ob-header { padding: 1.25rem 2rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ld-border); background: white; }
.ob-logo { display: flex; align-items: center; gap: 0.625rem; text-decoration: none; color: #171717; font-weight: 700; font-size: var(--ld-font-size-md); }
.ob-progress { display: flex; gap: 0.375rem; }
.ob-dot { width: 32px; height: 4px; border-radius: 99px; background: #EAEAEA; transition: background 0.3s; }
.ob-dot.active { background: #6366F1; }
.ob-dot.done { background: var(--ld-success); }

/* El hint del paso de teléfono necesita leerse mejor */
#ob-phone-hint { font-size: var(--ld-font-size-xs); color: #6b7280; }
#ob-phone-hint code { font-size: inherit; }

/* ── Combobox con buscador (país / dial code), estilo selector de Moneda ── */
.ld-combo { position: relative; }
.ld-combo-trigger { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; cursor: pointer; text-align: left; }
.ld-combo-trigger:hover { border-color: #9ca3af; }
.ld-combo-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-combo-chevron { width: 16px; height: 16px; flex-shrink: 0; color: #9ca3af; transition: transform 0.15s; }
.ld-combo-trigger[aria-expanded="true"] .ld-combo-chevron { transform: rotate(180deg); }
.ld-combo-panel { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 50; background: #fff; border: 1px solid var(--ld-border, #e5e7eb); border-radius: var(--ld-radius-md, 10px); box-shadow: 0 10px 30px rgba(0,0,0,0.12); overflow: hidden; }
.ld-combo-search-wrap { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid #f3f4f6; }
.ld-combo-search-wrap svg { width: 16px; height: 16px; color: #9ca3af; flex-shrink: 0; }
.ld-combo-search { flex: 1; border: none; outline: none; font-size: var(--ld-font-size-sm); font-family: inherit; color: #111827; background: transparent; padding: 0.15rem 0; }
.ld-combo-options { max-height: 240px; overflow-y: auto; padding: 0.25rem; }
.ld-combo-option { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0.5rem 0.625rem; border: none; background: transparent; border-radius: var(--ld-radius-sm, 6px); font-size: var(--ld-font-size-sm); color: #111827; cursor: pointer; text-align: left; font-family: inherit; }
.ld-combo-option span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ld-combo-option:hover { background: #f3f4f6; }
.ld-combo-option--active { background: rgba(37,99,235,0.06); font-weight: 600; }
.ld-combo-check { width: 16px; height: 16px; flex-shrink: 0; color: var(--ld-primary, #2563eb); opacity: 0; }
.ld-combo-option--active .ld-combo-check { opacity: 1; }
.ld-combo-empty { padding: 0.75rem; text-align: center; font-size: var(--ld-font-size-xs); color: #9ca3af; }
.ob-dialcombo .ld-combo-panel { min-width: 260px; }
@media (max-width: 520px) {
    .ob-dialcombo { flex-basis: 100% !important; max-width: none !important; width: 100%; }
    .ob-dialcombo .ld-combo-panel { min-width: 100%; }
}

/* Header del onboarding en mobile: logo legible y progreso compacto */
@media (max-width: 640px) {
    .ob-header { padding: 0.875rem 1.125rem; }
    .ob-progress { gap: 0.25rem; }
    .ob-dot { width: 18px; height: 4px; }
    .ld-brand-logo--onboarding .ld-brand-logo-img { max-width: 104px; }
}
@media (max-width: 420px) {
    .ob-dot { width: 12px; }
    .ld-brand-logo--onboarding .ld-brand-logo-img { max-width: 92px; }
}
.ob-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; }
@media (max-width: 640px) {
    .ob-body { align-items: flex-start; padding: 2rem 2rem; }
    .ob-mode-card { gap: 0.75rem; }
}
.ob-step { max-width: 520px; width: 100%; animation: obFadeIn 0.3s ease; }
.ob-step[style*="display: none"] { animation: none; }
.ob-step--wide { max-width: 1180px; }
@keyframes obFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.ob-title { font-size: var(--ld-font-size-3xl); font-weight: 700; color: #171717; margin-bottom: 0.5rem; letter-spacing: -0.025em; }
.ob-subtitle { font-size: var(--ld-font-size-control); color: #666; margin-bottom: 2rem; line-height: 1.5; }
.ob-label { display: block; font-size: var(--ld-font-size-xs); font-weight: 500; color: #666; margin-bottom: 0.5rem; }
.ob-input { width: 100%; padding: 0.75rem 1rem; font-size: var(--ld-font-size-md); border: 1px solid var(--ld-border); border-radius: 8px; background: white; color: #171717; transition: border-color 0.15s; font-family: inherit; }
.ob-input:focus { outline: none; border-color: var(--ld-gray-400); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.ob-input::placeholder { color: #999; }
.ob-input--addr { padding-left: 2.5rem; }
.ob-hint { font-size: var(--ld-font-size-2xs); color: #999; margin-top: 0.375rem; }
.ob-textarea { width: 100%; padding: 0.875rem 1rem; font-size: var(--ld-font-size-md); border: 1px solid var(--ld-border); border-radius: 8px; background: white; color: #171717; transition: border-color 0.15s; font-family: inherit; resize: vertical; min-height: 120px; line-height: 1.5; }
.ob-textarea:focus { outline: none; border-color: var(--ld-gray-400); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.ob-textarea::placeholder { color: #999; }
.ob-char-count { font-size: var(--ld-font-size-2xs); color: #999; margin-top: 0.375rem; text-align: right; }
.ob-char-count.ob-char-ok { color: #22c55e; }
.ob-field { margin-bottom: 1.5rem; position: relative; }
.ob-field-icon { position: absolute; left: 0.875rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #999; pointer-events: none; }
.ob-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 2.5rem; }
.ob-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.625rem 1.5rem; font-size: var(--ld-font-size-control); font-weight: 600; border-radius: var(--ld-radius-sm); border: none; cursor: pointer; transition: all 0.15s; font-family: inherit; }
.ob-btn-primary { background: var(--ld-primary); color: white; }
.ob-btn-primary:hover { background: var(--ld-primary-dark); }
.ob-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.ob-btn-back { background: transparent; color: #666; }
.ob-btn-back:hover { color: #171717; }
.ob-btn svg { width: 16px; height: 16px; }
.ob-places-dropdown { position: absolute; z-index: var(--ld-z-dropdown); background: #fff; border: 1px solid #d1d5db; border-radius: 0.5rem; box-shadow: 0 4px 16px rgba(0,0,0,.12); list-style: none; padding: 0.25rem 0; width: 100%; max-height: 220px; overflow-y: auto; font-size: var(--ld-font-size-muted); margin-top: 2px; }
.ob-places-item { padding: 0.625rem 1rem; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; color: #333; }
.ob-places-item:hover { background: #F5F5F5; }
.ob-places-item svg { width: 16px; height: 16px; color: #999; flex-shrink: 0; }
.ob-places-item.ob-places-empty { color: #666; cursor: default; font-size: var(--ld-font-size-xs); }
.ob-places-item.ob-places-empty:hover { background: transparent; }
.ob-places-item.ob-places-loading { cursor: default; padding: 0.75rem 1rem; }
.ob-places-item.ob-places-loading:hover { background: transparent; }
.ob-places-shimmer { height: 14px; width: 80%; border-radius: 4px; background: linear-gradient(90deg, #E8EAED 25%, #F4F5F7 50%, #E8EAED 75%); background-size: 200% 100%; animation: obSkShimmer 1.35s ease-in-out infinite; }
.ob-places-item.ob-places-loading:nth-child(2) .ob-places-shimmer { width: 65%; }
.ob-places-item.ob-places-loading:nth-child(3) .ob-places-shimmer { width: 72%; }
.ob-addr-confirmed { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; padding: 0.5rem 0.75rem; background: var(--ld-success-surface); border: 1px solid var(--ld-success-border); border-radius: 0.375rem; font-size: var(--ld-font-size-muted); color: var(--ld-success-text); }
.ob-addr-confirmed span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ob-addr-change { background: none; border: none; color: #2563eb; font-size: var(--ld-font-size-xs); cursor: pointer; padding: 0; text-decoration: underline; flex-shrink: 0; }
.ob-addr-change:hover { color: #1d4ed8; }
.ob-manual-hint { font-size: var(--ld-font-size-muted); color: #666; margin: 0 0 1rem 0; }
.ob-link-btn { background: none; border: none; color: #2563eb; cursor: pointer; text-decoration: underline; font-size: inherit; padding: 0; }
.ob-link-btn:hover { color: #1d4ed8; }
.ob-maps-search-skeleton { margin-top: 0; }
.ob-maps-search-skeleton .ob-maps-skeleton-caption { font-size: var(--ld-font-size-control); color: #666; margin: 0 0 1.125rem 0; font-weight: 500; line-height: 1.4; }
.ob-sk { background: linear-gradient(90deg, #E8EAED 25%, #F4F5F7 50%, #E8EAED 75%); background-size: 200% 100%; animation: obSkShimmer 1.35s ease-in-out infinite; border-radius: 8px; }
@keyframes obSkShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ob-maps-result--skeleton .ob-maps-photo.ob-sk { height: 120px; border-radius: 0; }
.ob-sk-line--title { height: 18px; width: 72%; margin-bottom: 0.5rem; }
.ob-sk-line { height: 13px; width: 100%; margin-bottom: 0.35rem; }
.ob-sk-line--short { width: 58%; margin-bottom: 0.75rem; }
.ob-sk-meta { height: 12px; width: 4.75rem; }
.ob-maps-result--skeleton .ob-maps-meta { margin-top: 0.15rem; }
.ob-sk-btn-primary { flex: 1; min-height: 42px; border-radius: 8px; }
.ob-sk-btn-secondary { width: 7rem; min-height: 42px; flex-shrink: 0; border-radius: 8px; }
.ob-maps-result--skeleton .ob-maps-actions { pointer-events: none; }
@keyframes obSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ob-spinner { width: 40px; height: 40px; border: 3px solid #EAEAEA; border-top-color: #6366F1; border-radius: 50%; animation: obSpin 0.8s linear infinite; }
.ob-maps-result { border: 1px solid var(--ld-border); border-radius: 12px; overflow: hidden; background: white; margin-top: 1.5rem; }
.ob-maps-photo { height: 120px; background: #F5F5F5; background-size: cover; background-position: center; }
.ob-maps-info { padding: 1.25rem; }
.ob-maps-name { font-weight: 600; font-size: var(--ld-font-size-md); color: #171717; margin-bottom: 0.25rem; }
.ob-maps-addr { font-size: var(--ld-font-size-xs); color: #666; margin-bottom: 0.5rem; }
.ob-maps-meta { display: flex; gap: 1rem; font-size: var(--ld-font-size-xs); color: #999; }
.ob-maps-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
.ob-maps-confirm { flex: 1; padding: 0.625rem; background: var(--ld-primary); color: white; border: none; border-radius: 8px; font-weight: 600; font-size: var(--ld-font-size-muted); cursor: pointer; font-family: inherit; }
.ob-maps-confirm:hover { background: var(--ld-primary-dark, var(--ld-primary)); filter: brightness(0.9); }
.ob-maps-deny { padding: 0.625rem 1rem; background: transparent; color: #999; border: 1px solid var(--ld-border); border-radius: 8px; font-size: var(--ld-font-size-xs); cursor: pointer; font-family: inherit; }
.ob-maps-deny:hover { border-color: #999; color: #666; }
.ob-maps-result.ob-maps-result--skeleton { margin-top: 0; }
.ob-industry-search-wrap { position: relative; margin-bottom: 1rem; }
.ob-industry-search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: #999; pointer-events: none; }
.ob-industry-search-wrap .ob-input { padding-left: 2.375rem; }
.ob-industry-section-label { font-size: var(--ld-font-size-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #999; margin-bottom: 0.5rem; }
#ob-industry-popular { display: none; }
.ob-industry-popular-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.375rem; margin-bottom: 1rem; }
.ob-industry-btn { padding: 0.5rem 0.75rem; border: 1px solid var(--ld-border); border-radius: 8px; background: white; font-size: var(--ld-font-size-sm); font-weight: 500; color: #444; cursor: pointer; transition: all 0.12s; text-align: left; font-family: inherit; }
.ob-industry-btn:hover { border-color: #999; background: #FAFAFA; }
.ob-industry-btn.selected { border-color: #6366F1; background: #EEF2FF; color: #4F46E5; }
.ob-industry-btn-otro { width: 100%; border-style: dashed; color: #888; }
.ob-industry-categories { max-height: 320px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ddd transparent; border: 1px solid var(--ld-border); border-radius: 10px; }
.ob-industry-categories::-webkit-scrollbar { width: 5px; }
.ob-industry-categories::-webkit-scrollbar-thumb { background: #ddd; border-radius: 3px; }
.ob-industry-cat { border-bottom: 1px solid #F3F3F3; }
.ob-industry-cat:last-child { border-bottom: none; }
.ob-industry-cat-header { display: flex; align-items: center; gap: 0.625rem; width: 100%; padding: 0.75rem 0.875rem; background: none; border: none; cursor: pointer; font-family: inherit; font-size: var(--ld-font-size-sm); font-weight: 500; color: #333; transition: background 0.1s; }
.ob-industry-cat-header:hover { background: #FAFAFA; }
.ob-industry-cat-icon { width: 18px; height: 18px; flex-shrink: 0; color: #888; }
.ob-industry-cat-label { flex: 1; text-align: left; }
.ob-industry-cat-count { font-size: var(--ld-font-size-sm); color: #bbb; background: #F5F5F5; border-radius: 99px; padding: 0.125rem 0.5rem; }
.ob-industry-cat-chevron { width: 16px; height: 16px; color: #bbb; transition: transform 0.2s; flex-shrink: 0; }
.ob-industry-cat-header[aria-expanded="true"] .ob-industry-cat-chevron { transform: rotate(180deg); }
.ob-industry-cat-body { padding: 0 0.75rem 0.75rem; }
.ob-industry-cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.375rem; }
.ob-industry-results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.375rem; max-height: 300px; overflow-y: auto; }
.ob-industry-other { margin-top: 0.75rem; }
.ob-mode-list { display: flex; flex-direction: column; gap: 0.75rem; max-width: 480px; margin: 0 auto; }
.ob-mode-card { display: flex; align-items: center; gap: 1.25rem; padding: 1.25rem 1.5rem; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-sm); background: white; cursor: pointer; transition: all 0.15s; text-align: left; width: 100%; }
.ob-mode-card:hover { border-color: #999; background: #FAFAFA; }
.ob-mode-card.selected { border-color: #6366F1; background: #EEF2FF; }
.ob-mode-icon { width: 48px; height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; color: var(--ld-gray-400); transition: color 0.15s; }
.ob-mode-card.selected .ob-mode-icon { color: #6366F1; }
.ob-mode-text h3 { font-size: var(--ld-font-size-md); font-weight: 600; color: #171717; margin: 0 0 0.25rem; }
.ob-mode-text p { font-size: var(--ld-font-size-xs); color: #888; margin: 0; }
.ob-mode-text p.ob-mode-text-sm { font-size: var(--ld-font-size-sm); }

.ob-objective-list { display: flex; flex-direction: column; gap: 0.625rem; }
.ob-objective-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-sm); background: white; cursor: pointer; transition: all 0.15s; text-align: left; width: 100%; }
.ob-objective-card:hover { border-color: #999; background: #FAFAFA; }
.ob-objective-card.selected { border-color: #6366F1; background: #EEF2FF; }
.ob-objective-radio { width: 20px; height: 20px; min-width: 20px; border-radius: 50%; border: 2px solid #D4D4D4; transition: all 0.15s; display: flex; align-items: center; justify-content: center; }
.ob-objective-card.selected .ob-objective-radio { border-color: #6366F1; }
.ob-objective-card.selected .ob-objective-radio::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: #6366F1; }
.ob-objective-text h3 { font-size: var(--ld-font-size-control); font-weight: 600; color: #171717; margin: 0 0 0.125rem; }
.ob-objective-text p { font-size: var(--ld-font-size-xs); color: #888; margin: 0; }
.ob-colors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.ob-color-card { border: 2px solid transparent; border-radius: var(--ld-radius-sm); overflow: hidden; cursor: pointer; transition: all 0.15s; background: white; }
.ob-color-card:hover { border-color: #D4D4D4; }
.ob-color-card.selected { border-color: #171717; }
.ob-color-swatch { height: 56px; display: flex; }
.ob-color-swatch span { flex: 1; }
.ob-color-name { padding: 0.625rem; font-size: var(--ld-font-size-2xs); font-weight: 500; color: #666; text-align: center; }
.ob-logo-options { display: flex; flex-direction: column; gap: 1.5rem; }
.ob-logo-generate { text-align: center; padding: 1.5rem; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-sm); background: #FAFAFA; }
.ob-logo-generate p { font-size: var(--ld-font-size-muted); color: #666; margin-bottom: 1rem; }
.ob-logo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 1rem; margin-bottom: 1.5rem; }
.ob-logo-grid--skeleton { margin-bottom: 0; }
.ob-logo-grid--single { grid-template-columns: 1fr; max-width: 180px; margin-left: auto; margin-right: auto; }
.ob-logo-option { aspect-ratio: 1; border: 2px solid #EAEAEA; border-radius: var(--ld-radius-sm); overflow: hidden; cursor: pointer; transition: all 0.15s; background: white; display: flex; align-items: center; justify-content: center; padding: 1rem; position: relative; }
.ob-logo-option:hover { border-color: #999; }
.ob-logo-option.selected { border-color: var(--ld-primary); box-shadow: 0 0 0 1px var(--ld-primary); }
.ob-logo-selected-badge { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--ld-font-size-micro); font-weight: 600; color: var(--ld-primary); background: #EEF2FF; padding: 0.25rem 0.625rem; border-radius: 99px; white-space: nowrap; pointer-events: none; }
.ob-logo-selected-badge::before { content: ''; width: 5px; height: 5px; background: var(--ld-primary); border-radius: 50%; }
.ob-logo-option--appear { animation: logoAppear 0.3s ease forwards; }
@keyframes logoAppear { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.ob-logo-option img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ob-logo-skeleton { aspect-ratio: 1; border: 2px solid #EAEAEA; border-radius: var(--ld-radius-sm); background: #F9FAFB; display: flex; align-items: center; justify-content: center; padding: 1rem; overflow: hidden; }
.ob-logo-skeleton-inner { width: 60%; height: 60%; border-radius: 8px; background: linear-gradient(90deg, #EAEAEA 25%, #F5F5F5 50%, #EAEAEA 75%); background-size: 200% 100%; animation: skeletonShimmer 1.5s ease-in-out infinite; }
@keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.ob-logo-upload { text-align: center; padding: 1.5rem; border: 2px dashed #EAEAEA; border-radius: var(--ld-radius-sm); cursor: pointer; transition: all 0.15s; }
.ob-logo-upload:hover { border-color: #999; background: #FAFAFA; }
.ob-logo-upload input { display: none; }
.ob-logo-upload-icon { width: 48px; height: 48px; margin: 0 auto 0.75rem; color: #999; }
.ob-logo-upload p { font-size: var(--ld-font-size-muted); color: #666; margin: 0; }
.ob-logo-upload span { font-size: var(--ld-font-size-2xs); color: #999; }
.ob-logo-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-sm); background: #FAFAFA; position: relative; }
.ob-logo-preview img { max-height: 80px; max-width: 100%; object-fit: contain; }
.ob-logo-preview-badge { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--ld-font-size-2xs); font-weight: 600; color: var(--ld-primary); background: #EEF2FF; padding: 0.375rem 0.75rem; border-radius: 99px; }
.ob-logo-preview-badge::before { content: ''; width: 6px; height: 6px; background: var(--ld-primary); border-radius: 50%; }
.ob-logo-skip { font-size: var(--ld-font-size-xs); color: #999; text-decoration: underline; cursor: pointer; margin-top: 0.5rem; }
.ob-logo-skip:hover { color: #666; }
.ob-logo-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.ob-logo-choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.5rem 1rem; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-sm); background: white; cursor: pointer; transition: all 0.15s; text-align: center; }
.ob-logo-choice:hover { border-color: #999; background: #FAFAFA; }
.ob-logo-choice.active { border-color: var(--ld-primary); background: #EEF2FF; }
.ob-logo-choice-icon { width: 40px; height: 40px; color: #666; }
.ob-logo-choice h4 { font-size: var(--ld-font-size-control); font-weight: 600; color: #171717; margin: 0; }
.ob-logo-choice p { font-size: var(--ld-font-size-xs); color: #888; margin: 0; }
.ob-logo-result { margin-top: 1rem; }
.ob-confirm-card { border: 1px solid var(--ld-border); border-radius: var(--ld-radius-sm); background: white; padding: 1.5rem; }
.ob-confirm-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid #F3F3F3; }
.ob-confirm-row:last-child { border-bottom: none; }
.ob-confirm-label { font-size: var(--ld-font-size-sm); color: #888; }
.ob-confirm-value { font-size: var(--ld-font-size-sm); font-weight: 500; color: #171717; text-align: right; }
.ob-confirm-colors { display: flex; gap: 0.25rem; }
.ob-confirm-color { width: 24px; height: 24px; border-radius: 4px; border: 1px solid rgba(0,0,0,0.1); }
.ob-confirm-logo { max-height: 40px; max-width: 120px; object-fit: contain; }
.ob-confirm-nologo { font-size: var(--ld-font-size-xs); color: #999; font-style: italic; }
@media (max-width: 480px) { .ob-logo-choices { grid-template-columns: 1fr; } }
.ob-btn-gen { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-size: var(--ld-font-size-control); font-weight: 600; border-radius: 8px; border: none; cursor: pointer; transition: all 0.15s; font-family: inherit; background: linear-gradient(135deg, #6366F1, #8B5CF6); color: white; }
.ob-btn-gen:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,0.3); }
.ob-btn-gen:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.ob-btn-gen svg { width: 18px; height: 18px; }
/* Legacy ob-gen (kept for reference) */
.ob-gen { display: none; }

/* ── New generation step (ob-gen2) ─────────────────────────────────────── */
.ob-gen2 { text-align: left; padding: 2rem 0; max-width: 480px; width: 100%; }
.ob-gen2-title { font-size: var(--ld-font-size-2xl); font-weight: 700; color: #111827; margin: 0 0 0.25rem; }
.ob-gen2-subtitle { font-size: var(--ld-font-size-control); color: #6B7280; margin: 0 0 1.5rem; }
.ob-gen2-progress { margin-bottom: 1.75rem; }
.ob-gen2-progress-label { font-size: var(--ld-font-size-xs); font-weight: 500; color: #374151; margin-bottom: 0.5rem; }
.ob-gen2-bar { width: 100%; height: 8px; background: #E5E7EB; border-radius: 4px; overflow: hidden; position: relative; }
.ob-gen2-bar-fill { height: 100%; background: var(--ld-primary, #4F46E5); border-radius: 4px; transition: width 0.3s ease; width: 0%; }
.ob-gen2-pct { display: block; text-align: right; font-size: var(--ld-font-size-xs); font-weight: 500; color: #374151; margin-top: 0.375rem; }
.ob-gen2-steps { display: flex; flex-direction: column; gap: 0; border: 1px solid #E5E7EB; border-radius: 12px; overflow: hidden; background: #fff; }
.ob-gen2-step { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1.25rem; border-bottom: 1px solid #F3F4F6; transition: background 0.2s; }
.ob-gen2-step:last-child { border-bottom: none; }
.ob-gen2-step.done { background: var(--ld-success-surface); }
.ob-gen2-step.active { background: #FFFFFF; }
.ob-gen2-dot { width: 10px; height: 10px; border-radius: 50%; background: #D1D5DB; flex-shrink: 0; transition: background 0.3s; }
.ob-gen2-step.active .ob-gen2-dot { background: var(--ld-primary, #4F46E5); animation: obGen2Pulse 1.4s ease-in-out infinite; }
.ob-gen2-step.done .ob-gen2-dot { background: var(--ld-success); }
.ob-gen2-step-label { font-size: var(--ld-font-size-muted); color: #6B7280; flex: 1; font-weight: 400; }
.ob-gen2-step.active .ob-gen2-step-label { color: #111827; font-weight: 600; }
.ob-gen2-step.done .ob-gen2-step-label { color: var(--ld-success); font-weight: 600; }
.ob-gen2-step.done::after { content: ""; width: 18px; height: 18px; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310B981' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; background-position: center; }
.ob-gen2-hint { font-size: var(--ld-font-size-xs); color: #9CA3AF; margin-top: 1.5rem; }
@keyframes obGen2Pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.ob-showcase { max-width: 1180px; width: 100%; }
.ob-showcase-pills { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.25rem; }
.ob-pill { padding: 0.5rem 1.25rem; border: 1px solid var(--ld-border); border-radius: 99px; background: white; font-size: var(--ld-font-size-xs); font-weight: 500; color: #666; cursor: pointer; font-family: inherit; transition: all 0.15s; display: flex; align-items: center; gap: 0.375rem; }
.ob-pill:hover { border-color: #999; }
.ob-pill.active { border-color: #171717; background: #171717; color: white; }
.ob-pill-badge { font-size: var(--ld-font-size-micro); background: #6366F1; color: white; border-radius: 4px; padding: 1px 5px; font-weight: 700; }
.ob-browser { border: 1px solid var(--ld-border); border-radius: 12px; overflow: hidden; background: white; box-shadow: 0 4px 24px rgba(0,0,0,.06); }
.ob-browser-bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: #FAFAFA; border-bottom: 1px solid var(--ld-border); }
.ob-browser-dots { display: flex; gap: 6px; }
.ob-browser-dots span { width: 10px; height: 10px; border-radius: 50%; background: #E5E5E5; }
.ob-browser-url { flex: 1; font-size: var(--ld-font-size-2xs); color: #999; background: white; border: 1px solid var(--ld-border); border-radius: 6px; padding: 0.375rem 0.75rem; display: flex; align-items: center; gap: 0.375rem; }
.ob-browser-url svg { width: 12px; height: 12px; color: var(--ld-success); flex-shrink: 0; }
.ob-viewport { position: relative; height: 460px; background: #F5F5F5; transition: all 0.3s; }
.ob-viewport iframe { width: 100%; height: 100%; border: none; }
.ob-viewport-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #F5F5F5; z-index: 2; transition: opacity 0.3s; }
.ob-viewport-loading.hidden { opacity: 0; pointer-events: none; }
.ob-viewport-loading span { font-size: var(--ld-font-size-xs); color: #999; }
.ob-showcase-cta { text-align: center; margin-top: 1.5rem; }
.ob-btn-use { padding: 0.75rem 2.5rem; background: #171717; color: white; border: none; border-radius: 8px; font-size: var(--ld-font-size-md); font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; }
.ob-btn-use:hover { background: #333; }
.ob-cta-hint { font-size: var(--ld-font-size-2xs); color: #999; margin-top: 0.5rem; }
.ob-error { text-align: center; padding: 3rem 2rem; }
.ob-error-icon { width: 56px; height: 56px; border-radius: 50%; background: #FEF2F2; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.ob-error-icon svg { width: 24px; height: 24px; color: #EF4444; }
.ob-error h3 { font-size: var(--ld-font-size-lg); font-weight: 600; color: #171717; margin-bottom: 0.375rem; }
.ob-error p { font-size: var(--ld-font-size-muted); color: #666; margin-bottom: 1.5rem; }
.ob-success { text-align: center; padding: 2rem; position: relative; overflow: hidden; }
.ob-success-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--ld-success-gradient); display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; animation: obSuccessPop 0.5s ease; }
.ob-success-icon svg { width: 40px; height: 40px; color: white; }
@keyframes obSuccessPop { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
.ob-success-countdown { font-size: var(--ld-font-size-muted); color: #888; margin-top: 1rem; }
#countdown-num { font-weight: 700; color: #6366F1; }
.ob-confetti { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: hidden; z-index: 0; }
.ob-confetti-piece { position: absolute; width: 10px; height: 10px; top: -20px; animation: obConfettiFall 3s ease-in-out forwards; }
@keyframes obConfettiFall { 0% { transform: translateY(0) rotate(0deg); opacity: 1; } 100% { transform: translateY(600px) rotate(720deg); opacity: 0; } }

/* Dashboard: site live celebration modal */
.ld-live-confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: calc(var(--ld-z-modal) - 1); }
.ld-live-confetti .ob-confetti-piece { top: -20px; }
.ld-live-modal-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); z-index: var(--ld-z-modal);
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    animation: ld-modal-fadein 0.2s ease;
}
.ld-live-modal-overlay.ld-live-modal-overlay--hidden {
    display: none;
}
.ld-live-modal-box {
    background: white; border-radius: var(--ld-radius-xl); border: 1px solid var(--ld-border);
    padding: 2rem 2rem 1.75rem; max-width: 420px; width: 100%; text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}
.ld-live-modal-icon { margin-bottom: 1.25rem; }
.ld-live-modal-title {
    font-size: 1.375rem; font-weight: 700; color: var(--ld-gray-900);
    margin: 0 0 0.75rem; line-height: 1.3;
}
.ld-live-modal-text, .ld-live-modal-subtext {  font-size: 0.9375rem; color: var(--ld-gray-600); margin: 0 0 0.5rem; line-height: 1.65; }
.ld-live-modal-text strong { font-weight: 600; }
.ld-live-modal-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.ld-live-modal-actions .ld-btn { width: 100%; justify-content: center; }


.ld-live-modal-actions {
    margin-top: 1.5rem;
}
/* DNS pending modal icon (informational, not celebration) */
.ld-dns-pending-modal-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FEF3C7;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
}
.ld-dns-pending-modal-icon svg {
    width: 32px;
    height: 32px;
    color: #D97706;
}

/* Dashboard: DNS explainer modal (on-demand via "¿Por qué tarda?") */
#dns-why-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: var(--ld-z-modal);
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: ld-modal-fadein 0.2s ease;
}
#dns-why-modal.is-open {
    display: flex;
}
#dns-why-modal .ld-dns-modal-box {
    background: white;
    border-radius: var(--ld-radius-md);
    border: 1px solid var(--ld-border);
    padding: var(--ld-spacing-8);
    max-width: 480px;
    width: 100%;
}
#dns-why-modal .ld-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ld-spacing-4);
    padding: 0 !important;
}
#dns-why-modal .ld-modal-header h3 {
    font-size: var(--ld-font-size-lg);
    font-weight: 600;
    color: var(--ld-gray-900);
    margin: 0;
}
#dns-why-modal .ld-modal-close {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--ld-gray-400);
    display: flex;
}
#dns-why-modal .ld-modal-close:hover { color: var(--ld-gray-700); }
#dns-why-modal .ld-modal-close svg { width: 18px; height: 18px; }
.ld-dns-modal-copy p {
    margin: 0 0 0.875rem;
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-600);
    line-height: 1.6;
}
.ld-dns-modal-copy p:last-child {
    margin-bottom: 0;
}


@media (max-width: 640px) { .ob-title { font-size: var(--ld-font-size-xl); } .ob-industry-popular-grid, .ob-industry-cat-grid, .ob-industry-results-grid { grid-template-columns: 1fr; } .ob-colors-grid { grid-template-columns: repeat(2, 1fr); } .ob-viewport { height: 300px; } .ob-gen2 { padding: 1.5rem 0; } .ob-gen2-title { font-size: var(--ld-font-size-xl); } .ob-showcase-pills { flex-wrap: wrap; } }

/* =====================================================
   PAGE: IA CONTENT
   ===================================================== */
.ld-input { display: block; width: 100%; padding: 0.5rem 0.75rem; font-size: var(--ld-font-size-control); line-height: 1.5; color: var(--ld-gray-900); background: #fff; border: 1px solid var(--ld-gray-300); border-radius: 6px; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; -webkit-appearance: none; appearance: none; }
.ld-input:hover { border-color: var(--ld-gray-400); }
.ld-input:focus { outline: none; border-color: var(--ld-primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12); }
.ld-input::placeholder { color: var(--ld-gray-400); }
.seo-wizard-page { min-height: calc(100vh - 200px); display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; }
.seo-wizard-container { max-width: 800px; width: 100%; }
.seo-wizard-header { text-align: center; margin-bottom: 2rem; }
.seo-wizard-header h1 { font-size: var(--ld-font-size-2xl); font-weight: 700; color: var(--ld-gray-900); margin: 0 0 0.5rem; }
.seo-wizard-header p { color: var(--ld-gray-500); margin: 0; }
.seo-wizard-progress { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 1.5rem; }
.seo-wizard-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ld-gray-300); transition: all 0.3s ease; }
.seo-wizard-dot.active { background: var(--ld-primary); transform: scale(1.25); }
.seo-wizard-dot.done { background: var(--ld-gray-500); }
.seo-wizard-card { background: var(--ld-content-bg); border-radius: var(--ld-radius-lg); border: 1px solid var(--ld-border); padding: 2rem; }
.seo-wizard-step { display: none; padding-bottom: 2rem; }
.seo-wizard-step.active { display: block; }
.seo-wizard-title { font-size: var(--ld-font-size-xl); font-weight: 600; color: var(--ld-gray-900); margin: 0 0 0.5rem; }
.seo-wizard-desc { font-size: var(--ld-font-size-sm); color: var(--ld-gray-500); margin: 0 0 1.5rem; }
.seo-option-list { display: flex; flex-direction: column; gap: 0.75rem; }
.seo-option-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; background: white; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-sm); cursor: pointer; transition: all 0.15s ease; }
.seo-option-card:hover { border-color: #999; background: #FAFAFA; }
.seo-option-card.selected { border-color: var(--ld-primary); background: #EEF2FF; }
.seo-option-radio { width: 20px; height: 20px; min-width: 20px; border: 2px solid #D4D4D4; border-radius: 50%; flex-shrink: 0; position: relative; transition: all 0.15s ease; display: flex; align-items: center; justify-content: center; }
.seo-option-card.selected .seo-option-radio { border-color: #6366F1; }
.seo-option-card.selected .seo-option-radio::after { content: ''; width: 10px; height: 10px; background: #6366F1; border-radius: 50%; }
.seo-option-check { width: 20px; height: 20px; border: 2px solid var(--ld-gray-300); border-radius: 5px; flex-shrink: 0; margin-top: 2px; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; color: white; }
.seo-option-check svg { opacity: 0; transform: scale(0.5); transition: all 0.15s ease; }
.seo-option-card.selected .seo-option-check { background: var(--ld-primary); border-color: var(--ld-primary); }
.seo-option-card.selected .seo-option-check svg { opacity: 1; transform: scale(1); }
.seo-option-text { flex: 1; }
.seo-option-text h3 { font-size:var(--ld-font-size-base); font-weight: 600; color: #171717; margin: 0 0 0.125rem; }
.seo-option-text p { font-size: var(--ld-font-size-sm); color: var(--ld-gray-500); margin: 0; }
.seo-input { display: block; width: 100%; padding: 0.625rem 0.875rem; font-size: var(--ld-font-size-sm); color: var(--ld-gray-900); background: var(--ld-content-bg); border: 1px solid var(--ld-border); border-radius: var(--ld-radius-md); transition: border-color 0.15s ease, box-shadow 0.15s ease; box-sizing: border-box; -webkit-appearance: none; appearance: none; }
.seo-input:focus { outline: none; border-color: var(--ld-gray-400); box-shadow: 0 0 0 3px rgba(0,0,0,0.06); }
.seo-input::placeholder { color: var(--ld-gray-400); }
.seo-input-textarea { resize: vertical; min-height: 100px; line-height: 1.6; font-family: inherit; }
.seo-wizard-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--ld-border); }
.seo-wizard-actions-single { justify-content: flex-end; }
.seo-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.5rem; font-size: var(--ld-font-size-control); font-weight: 600; border-radius: 10px; border: none; cursor: pointer; transition: all 0.2s ease; }
.seo-btn-primary { background: var(--ld-primary); color: white; }
.seo-btn-primary:hover { background: var(--ld-primary-dark, #4F46E5); }
.seo-btn-back { background: transparent; color: var(--ld-gray-600); padding-left: 0.75rem; }
.seo-btn-back:hover { color: var(--ld-gray-900); }
.seo-wizard-processing { text-align: center; padding: 2rem 0; }
.seo-wizard-spinner { width: 48px; height: 48px; border: 3px solid var(--ld-gray-200); border-top-color: var(--ld-primary); border-radius: 50%; margin: 0 auto 1.5rem; animation: spin 1s linear infinite; }
.seo-wizard-processing h3 { font-size: var(--ld-font-size-xl); font-weight: 600; color: var(--ld-gray-900); margin: 0 0 1.5rem; }
.seo-wizard-progress-bar { height: 6px; background: var(--ld-gray-200); border-radius: 9999px; overflow: hidden; max-width: 300px; margin: 0 auto 1.5rem; }
.seo-wizard-progress-fill { height: 100%; background: linear-gradient(90deg, var(--ld-primary), #8b5cf6); width: 0%; transition: width 0.5s ease; }
.seo-wizard-checklist { list-style: none; padding: 0; margin: 0 auto; max-width: 260px; text-align: left; }
.seo-wizard-checklist li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; font-size: var(--ld-font-size-control); color: var(--ld-gray-500); }
.seo-wizard-checklist li.done { color: var(--ld-gray-700); }
.seo-wizard-checklist li.done .seo-check-icon { color: var(--ld-success); }
@media (max-width: 640px) { .seo-wizard-card { padding: 1.5rem; } .seo-wizard-title { font-size: var(--ld-font-size-xl); } .seo-option-card { padding: 1rem; } }
.ld-seo-activate-card { background: white; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-sm); padding: 3rem; text-align: center; max-width: 500px; margin: 2rem auto; }
.ld-seo-activate-icon { color: var(--ld-primary); margin-bottom: 1.5rem; }
.ld-seo-activate-card h2 { font-size: var(--ld-font-size-2xl); font-weight: 700; margin-bottom: 0.75rem; color: var(--ld-gray-900); }
.ld-seo-activate-card > p { color: var(--ld-gray-600); margin-bottom: 1.5rem; line-height: 1.6; }
.ld-seo-features-list { list-style: none; padding: 0; margin: 0 0 1.5rem 0; text-align: left; }
.ld-seo-features-list li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; color: var(--ld-gray-700); font-size: var(--ld-font-size-control); }
.ld-seo-features-list svg { color: var(--ld-primary); flex-shrink: 0; }
.ld-btn-lg { padding: 0.875rem 1.5rem; font-size: var(--ld-font-size-md); }
.ld-seo-modal-overlay { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; z-index: var(--ld-z-modal); padding: 1rem; }
.ld-seo-modal { background: white; border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); width: 100%; max-width: 500px; max-height: 90vh; overflow: hidden; display: flex; flex-direction: column; }
.ld-seo-modal-analyzing { max-width: 400px; padding: 2rem; }
.ld-seo-analyzing-content { text-align: center; }
.ld-seo-analyzing-spinner { width: 48px; height: 48px; border: 3px solid var(--ld-gray-200); border-top-color: var(--ld-primary); border-radius: 50%; margin: 0 auto 1.5rem; animation: spin 1s linear infinite; }
.ld-seo-analyzing-content h3 { font-size: var(--ld-font-size-lg); font-weight: 600; margin-bottom: 1.5rem; color: var(--ld-gray-900); }
.ld-seo-analyzing-progress { height: 6px; background: var(--ld-gray-200); border-radius: 9999px; overflow: hidden; margin-bottom: 1.5rem; }
.ld-seo-analyzing-bar { height: 100%; background: linear-gradient(90deg, var(--ld-primary), #8b5cf6); width: 0%; transition: width 0.5s ease; }
.ld-seo-analyzing-steps { list-style: none; padding: 0; margin: 0; text-align: left; }
.ld-seo-analyzing-steps li { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; color: var(--ld-gray-500); font-size: var(--ld-font-size-muted); }
.ld-seo-analyzing-steps li.completed { color: var(--ld-gray-900); }
.ld-seo-analyzing-steps li.completed .step-icon { color: var(--ld-success); }
.ld-seo-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ld-border); }
.ld-seo-modal-header h3 { font-size: var(--ld-font-size-md); font-weight: 600; margin: 0; }
.ld-seo-modal-close { background: none; border: none; padding: 0.25rem; cursor: pointer; color: var(--ld-gray-400); border-radius: 4px; }
.ld-seo-modal-close:hover { color: var(--ld-gray-600); background: var(--ld-gray-100); }
.ld-seo-modal-body { padding: 1.25rem; overflow-y: auto; flex: 1; }
.ld-seo-modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 24px 28px; border-top: 1px solid var(--ld-border); background: var(--ld-gray-50); }

/* Skeleton loaders */
@keyframes ld-skeleton-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.ld-skeleton { background: var(--ld-gray-200); border-radius: 4px; animation: ld-skeleton-pulse 1.5s ease-in-out infinite; }
.ld-skeleton-field { margin-bottom: 1rem; }
.ld-skeleton-label { height: 14px; width: 30%; margin-bottom: 0.5rem; }
.ld-skeleton-input { height: 40px; width: 100%; }
.ld-skeleton-input-sm { height: 40px; width: 50%; }

.ld-seo-form-field { margin-bottom: 1rem; }
.ld-seo-form-field label { display: block; font-size: var(--ld-font-size-xs); font-weight: 500; color: var(--ld-gray-700); margin-bottom: 0.375rem; }
.ld-seo-dashboard { display: flex; flex-direction: column; gap: 0; }
.ld-seo-stats-bar { display: flex; gap: 1rem; }
.ld-seo-stat-card { display: flex; flex-direction: column; flex: 1; background: white; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-sm); padding: 1rem 1.5rem; }
.ld-seo-stat-value { font-size: var(--ld-font-size-2xl); font-weight: 700; color: var(--ld-gray-900); }
.ld-seo-stat-label { font-size: var(--ld-font-size-2xs); color: var(--ld-gray-500); text-transform: uppercase; letter-spacing: 0.05em; }
.ld-seo-tab-content { }
.ld-seo-posts-list { display: flex; flex-direction: column; background: white; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-sm); overflow: hidden; }
.ld-seo-post-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.325rem 1.625rem; background: white; border-radius: 0; border-top: 1px solid var(--ld-border); transition: background 0.12s; }
.ld-seo-post-card:first-child { border-top: none; }
.ld-seo-post-card:hover { background: var(--ld-gray-50); }
.ld-seo-post-status { display: inline-flex; align-items: center; padding: 3px 8px; font-size: var(--ld-font-size-micro); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 4px; margin-bottom: 0.375rem; }
.ld-seo-status-pending_approval { background: #fef3c7; color: #92400e; }
.ld-seo-status-approved { background: #dbeafe; color: #1e40af; }
.ld-seo-status-generating { background: #e0e7ff; color: #3730a3; }
.ld-seo-status-scheduled { background: var(--ld-success-bg-soft); color: var(--ld-success-text); }
.ld-seo-status-paused { background: #fef3c7; color: #92400e; }
.ld-seo-post-main { flex: 1; min-width: 0; }
.ld-seo-post-title { font-size: var(--ld-font-size-control); font-weight: 600; color: var(--ld-gray-900); margin: 0 0 0.375rem 0; }
.ld-seo-post-keyword, .ld-seo-post-date, .ld-seo-post-excerpt { display: flex; align-items: center; gap: 0.375rem; font-size: var(--ld-font-size-xs); color: var(--ld-gray-500); margin: 0 0 0.25rem 0; }
.ld-seo-post-keyword { color: var(--ld-primary); }
.ld-seo-post-image { width: 80px; height: 60px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.ld-seo-post-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.ld-seo-filter-actions {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--ld-border);
}
.ld-seo-filter-actions .ld-editor-tabs-underlined {
    border-bottom: 0;
    flex: 1;
}
.ld-seo-calendar-open-btn {
    min-height: 0;
    height: 34px;
    padding: 0 0.875rem;
    font-size: var(--ld-font-size-xs);
    line-height: 1;
    white-space: nowrap;
}
.ld-seo-modal-wide { max-width: 1040px; }
#edit-post-modal.ld-seo-modal-overlay,
#write-post-modal.ld-seo-modal-overlay {
    animation: ld-modal-fadein 0.2s ease;
}
#edit-post-modal .ld-seo-modal,
#write-post-modal .ld-seo-modal {
    animation: modalSlideIn 0.2s ease-out;
}
#calendar-modal.ld-seo-modal-overlay {
    animation: ld-modal-fadein 0.2s ease;
}
#calendar-modal .ld-seo-modal {
    animation: modalSlideIn 0.2s ease-out;
}
.ld-seo-calendar-modal-content {
    background: #fff;
    border-radius: var(--ld-radius);
    padding: 1.5rem;
}
@media (max-width: 640px) {
    .ld-seo-filter-actions { flex-direction: column; gap: 0.75rem; }
    .ld-seo-calendar-open-btn { width: 100%; justify-content: center; }
}

.ld-seo-action-resume { color: var(--ld-success-dark); }
.ld-seo-action-resume:hover { color: var(--ld-success-darker); background: var(--ld-success-bg-soft); }
.ld-seo-post-card.ld-seo-post-paused { opacity: 0.6; border-style: dashed; }
.ld-seo-empty { text-align: center; padding: 2.5rem 2rem; color: var(--ld-gray-500); background: white; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-sm); }
.ld-seo-empty p { margin-bottom: 1rem; }
.ld-seo-empty-upsell { margin: 1rem 0 0 !important; font-size: var(--ld-font-size-xs); color: var(--ld-gray-400); }
.ld-seo-empty-upsell a { color: var(--ld-primary); text-decoration: none; font-weight: 500; }
.ld-seo-empty-upsell a:hover { text-decoration: underline; }
.ld-seo-calendar-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; }
.ld-seo-calendar-nav-btn { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--ld-border); border-radius: 8px; background: var(--ld-content-bg); color: var(--ld-gray-600); cursor: pointer; transition: all 0.15s ease; }
.ld-seo-calendar-nav-btn:hover:not(:disabled) { background: var(--ld-gray-50); color: var(--ld-gray-900); }
.ld-seo-calendar-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ld-seo-calendar-nav-label { font-size: var(--ld-font-size-md); font-weight: 600; color: var(--ld-gray-900); min-width: 180px; text-align: center; }
.ld-seo-calendars { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
.ld-seo-calendar { background: var(--ld-gray-50); border-radius: var(--ld-radius-sm); padding: 1rem; }
.ld-seo-calendar-header { text-align: center; margin-bottom: 1rem; }
.ld-seo-calendar-header h4 { font-size: var(--ld-font-size-control); font-weight: 600; color: var(--ld-gray-900); margin: 0; text-transform: capitalize; }
.ld-seo-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ld-seo-calendar-day-header { text-align: center; font-size: var(--ld-font-size-micro); font-weight: 600; color: var(--ld-gray-400); padding: 0.5rem 0; text-transform: uppercase; }
.ld-seo-calendar-day { aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: var(--ld-font-size-xs); color: var(--ld-gray-700); border-radius: 6px; cursor: pointer; position: relative; transition: all 0.15s; }
.ld-seo-calendar-day:hover { background: white; }
.ld-seo-calendar-day-empty { cursor: default; }
.ld-seo-calendar-day-past { color: var(--ld-gray-300); }
.ld-seo-calendar-day-today { background: var(--ld-primary); color: white; font-weight: 600; }
.ld-seo-calendar-day-today:hover { background: var(--ld-primary); }
.ld-seo-calendar-day-scheduled { font-weight: 600; color: var(--ld-primary); }
.ld-seo-calendar-dot { width: 6px; height: 6px; background: var(--ld-primary); border-radius: 50%; position: absolute; bottom: 4px; }
.ld-seo-calendar-day-today .ld-seo-calendar-dot { background: white; }
.ld-seo-calendar-dot-published { background: var(--ld-success) !important; }
.ld-seo-calendar-day-published { font-weight: 600; color: var(--ld-success); }
.ld-seo-calendar-legend { display: flex; gap: 1.5rem; justify-content: center; margin-top: 1.5rem; }
.ld-seo-legend-item { display: flex; align-items: center; gap: 0.5rem; font-size: var(--ld-font-size-2xs); color: var(--ld-gray-500); }
.ld-seo-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.ld-seo-legend-published { background: var(--ld-success); }
.ld-seo-legend-scheduled { background: var(--ld-primary); }
.ld-seo-legend-today { background: var(--ld-primary); box-shadow: 0 0 0 2px white, 0 0 0 3px var(--ld-primary); }
.ld-seo-modal-lg { max-width: 700px; }

/* SEO wizard modal — compact header + intro step */
#seo-wizard-modal.ld-seo-modal-overlay {
    animation: ld-modal-fadein 0.2s ease;
}
.ld-seo-wizard-modal.ld-seo-modal {
    animation: modalSlideIn 0.2s ease-out;
    position: relative;
    min-height: 0;
}
.ld-seo-wizard-modal .ld-seo-wizard-header {
    justify-content: flex-end;
    padding: 0.5rem 0.625rem;
    border-bottom: none;
    min-height: 0;
    padding: 28px 28px 0;
}
.ld-seo-wizard-modal .ld-seo-wizard-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 0 58px 28px;
}
.ld-seo-wizard-modal .seo-wizard-progress {
    display: none;
    justify-content: center;
    gap: 0.5rem;
   margin: 2px 0 34px;
}
.ld-seo-wizard-modal .seo-wizard-card {
    box-shadow: none;
    border: none;
    padding: 0;
    background: transparent;
    min-height: 0;
}
.ld-seo-wizard-modal .seo-wizard-step.active.seo-step-anim-forward {
    animation: seoWizardStepInFwd 0.18s ease-out both;
}
.ld-seo-wizard-modal .seo-wizard-step.active.seo-step-anim-back {
    animation: seoWizardStepInBack 0.18s ease-out both;
}
@keyframes seoWizardStepInFwd {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes seoWizardStepInBack {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .ld-seo-wizard-modal .seo-wizard-step.active.seo-step-anim-forward,
    .ld-seo-wizard-modal .seo-wizard-step.active.seo-step-anim-back {
        animation: none;
    }
}
.ld-seo-wizard-modal .seo-wizard-step .seo-wizard-title {
    margin-bottom: 0.5rem;
    font-size: var(--ld-font-size-xl) !important;
    text-align: center;
}
.ld-seo-wizard-modal .seo-wizard-step .seo-wizard-desc {
    text-align: center;
    margin: 0 0 1.75rem;
}
.seo-wizard-intro {
    text-align: center;
    padding: 0.25rem 0.5rem 0.5rem;
}
.seo-wizard-intro-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ld-primary) 10%, white);
    color: var(--ld-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.seo-wizard-intro-title {
    font-size: var(--ld-font-size-xl);
    font-weight: 700;
    color: var(--ld-gray-900);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.seo-wizard-intro-desc {
    font-size: var(--ld-font-size-control);
    color: var(--ld-gray-500);
    margin: 0;
    line-height: 1.55;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}
.ld-seo-wizard-modal .ld-seo-modal-footer {
    justify-content: flex-end;
}
.ld-seo-wizard-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}
.ld-seo-view-content { max-height: 60vh; overflow-y: auto; line-height: 1.7; color: var(--ld-gray-700); }
.ld-seo-view-content h1, .ld-seo-view-content h2, .ld-seo-view-content h3, .ld-seo-view-content h4 { color: var(--ld-gray-900); margin: 1.5rem 0 0.75rem 0; font-weight: 600; line-height: 1.3; }
.ld-seo-view-content h1 { font-size: var(--ld-font-size-2xl); }
.ld-seo-view-content h2 { font-size: var(--ld-font-size-xl); }
.ld-seo-view-content h3 { font-size: var(--ld-font-size-lg); }
.ld-seo-view-content h4 { font-size: var(--ld-font-size-md); }
.ld-seo-view-content p { margin-bottom: 1rem; }
.ld-seo-view-content .ld-view-lead-paragraph { font-size: var(--ld-font-size-md); font-weight: 400; line-height: 1.75; color: var(--ld-gray-700); margin: 0 0 1rem; }
.ld-seo-view-content .ld-view-demoted-heading { font-size: var(--ld-font-size-xl); }
.ld-seo-view-content ul, .ld-seo-view-content ol { margin: 1rem 0; padding-left: 1.5rem; }
.ld-seo-view-content li { margin-bottom: 0.5rem; }
.ld-seo-view-content img { max-width: 100%; height: auto; border-radius: 8px; margin: 1rem 0; }

/* Tab panels are reordered by importance (Publicados > Programados > Borradores)
   without moving the DOM blocks, so the stacked "Todos" view follows the same
   priority as the KPIs and tab buttons. */
.ld-seo-tab-panels { display: flex; flex-direction: column; }
.ld-seo-tab-panels [data-tab-content="publicados"] { order: 1; }
.ld-seo-tab-panels [data-tab-content="programados"] { order: 2; }
.ld-seo-tab-panels [data-tab-content="borradores"] { order: 3; }
.ld-seo-tab-panels [data-tab-content="calendario"] { order: 4; }
.ld-seo-view-featured-image { width: 100%; max-height: 300px; object-fit: cover; border-radius: 10px; margin: 0 0 1.5rem 0; }
.ld-post-inline-image { margin: 1.25rem 0 1.75rem; padding: 0; }
.ld-post-inline-image img { width: 100%; max-height: 260px; object-fit: cover; border-radius: 8px; display: block; }
.ld-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; font-size: var(--ld-font-size-micro); font-weight: 600; background: var(--ld-sidebar-active-bg); border-radius: 3px; margin-left: 4px; color: var(--ld-sidebar-text-active); line-height: 1; vertical-align: middle; }
.ld-pagination-sentinel { height: 1px; margin: 0; }

/* Manual blog posts */
.ld-seo-upsell-banner { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(139,92,246,0.08)); border: 1px solid rgba(99,102,241,0.15); border-radius: var(--ld-radius-sm); }
.ld-seo-upsell-icon { flex-shrink: 0; color: var(--ld-primary); }
.ld-seo-upsell-text { flex: 1; min-width: 0; }
.ld-seo-upsell-text strong { display: block; font-size: var(--ld-font-size-muted); color: var(--ld-gray-900); margin-bottom: 0.125rem; }
.ld-seo-upsell-text p { font-size: var(--ld-font-size-xs); color: var(--ld-gray-600); margin: 0; }
.ld-seo-badge { display: inline-flex; align-items: center; padding: 2px 8px; font-size: var(--ld-font-size-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 4px; }
.ld-seo-badge-draft { background: #fef3c7; color: #92400e; }
.ld-seo-badge-published { background: var(--ld-success-bg-soft); color: var(--ld-success-text); }
.ld-seo-post-draft {  }
.ld-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.35rem;
    font-size: var(--ld-font-size-micro);
    font-weight: 600;
    background: var(--ld-sidebar-active-bg);
    color: var(--ld-sidebar-text-active);
    border-radius: 3px;
    line-height: 1;
    flex-shrink: 0;
}
.ld-filter-btn.active .ld-tab-count {
    background: var(--ld-sidebar-active-bg);
    color: var(--ld-sidebar-text-active);
}
.ld-seo-modal-footer-actions { display: flex; gap: 0.5rem; }
.ld-write-image-upload { display: flex; flex-direction: column; gap: 0.75rem; }
.ld-write-image-preview { position: relative; }
.ld-write-image-preview img { width: 100%; max-height: 200px; object-fit: cover; display: block; }
.ld-write-image-remove { position: absolute; top: 0.5rem; right: 0.5rem; width: 28px; height: 28px; border-radius: 50%; background: rgba(0,0,0,0.6); border: none; color: white; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.15s; }
.ld-write-image-remove:hover { background: rgba(0,0,0,0.8); }
.ld-write-image-ai-note { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--ld-gray-500); }
.ld-write-image-ai-note--custom { color: var(--ld-gray-700); }
.ld-seo-dashboard .ld-page-header,
.ld-page-header:has(> .ld-btn),
.ld-page-header:has(> .ld-page-header-actions) { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ld-page-header-actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; }
.ld-page-header > .ld-btn,
.ld-page-header-actions > .ld-btn { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; }
.ld-chat-config-open-btn-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ld-chat-config-open-btn--active .ld-chat-config-open-btn-label::after,
.ld-chat-config-open-btn--inactive .ld-chat-config-open-btn-label::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 9999px;
    flex-shrink: 0;
}
.ld-chat-config-open-btn--active .ld-chat-config-open-btn-label::after {
    background: #34D399;
}
.ld-chat-config-open-btn--inactive .ld-chat-config-open-btn-label::after {
    background: #FBBF24;
}

/* =====================================================
   EDITOR: PARTIALS — IA MODAL + SKELETON
   ===================================================== */
.ld-ai-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.45); display: flex; align-items: center; justify-content: center; z-index: var(--ld-z-modal); padding: 1rem; }
.ld-ai-modal { background: white; border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); width: 100%; max-width: 420px; animation: modalSlideIn 0.2s ease-out; }
@keyframes modalSlideIn { from { opacity: 0; transform: translateY(-10px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
.ld-ai-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--ld-border); }
.ld-ai-modal-header h3 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1rem; font-weight: 600; color: var(--ld-gray-900); }
.ld-ai-modal-header h3 svg { color: var(--ld-primary); }
.ld-ai-modal-close { background: none; border: none; padding: 0.25rem; cursor: pointer; color: var(--ld-gray-400); border-radius: 4px; transition: all 0.15s; }
.ld-ai-modal-close:hover { color: var(--ld-gray-600); background: var(--ld-gray-100); }
.ld-ai-modal-body { padding: 1.25rem; }
.ld-ai-modal-field { margin-bottom: 1.25rem; }
.ld-ai-modal-field:last-child { margin-bottom: 0; }
.ld-ai-modal-field .ld-label { display: block; margin-bottom: 0.5rem; font-size: 13px; font-weight: 500; color: var(--ld-gray-700); }
.ld-ai-style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.ld-radio-card { display: block; position: relative; cursor: pointer; }
.ld-radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.ld-radio-card-content { display: flex; flex-direction: column; padding: 0.625rem 0.75rem; border: 1px solid var(--ld-border); border-radius: 8px; background: white; transition: all 0.15s; }
.ld-radio-card-content strong { font-size: 13px; font-weight: 500; color: var(--ld-gray-900); }
.ld-radio-card-content span { font-size: 11px; color: var(--ld-gray-500); }
.ld-radio-card input:checked + .ld-radio-card-content { border-color: var(--ld-primary); background: rgba(99, 102, 241, 0.04); box-shadow: 0 0 0 1px var(--ld-primary); }
.ld-radio-card:hover .ld-radio-card-content { border-color: var(--ld-gray-300); }
.ld-ai-modal-footer { padding: 1rem 1.25rem; border-top: 1px solid var(--ld-border); background: var(--ld-gray-50); border-radius: 0 0 12px 12px; }
.ld-ai-modal-remaining { font-size: 12px; color: var(--ld-gray-500); margin: 0 0 0.75rem 0; text-align: center; }
.ld-ai-modal-remaining strong { color: var(--ld-gray-700); }
.ld-ai-modal-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* AI image modals — steps, skeleton, success */
.ld-ai-image-modal-body {
    position: relative;
    min-height: 120px;
}
.ld-ai-image-modal-body > .ld-ai-modal-body {
    padding: 1rem 1.25rem 1.25rem;
}
.ld-ai-image-step-loading {
    padding: 0.75rem 1.25rem 1.25rem;
    min-height: 160px;
}
.ld-ai-image-skeleton-grid {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.25rem;
}
.ld-ai-image-skeleton-grid--1 {
    grid-template-columns: 1fr;
}
.ld-ai-image-skeleton-grid--1 .ld-ai-image-skeleton-item {
    aspect-ratio: 16 / 9;
    min-height: 140px;
}
.ld-ai-image-skeleton-grid--2 {
    grid-template-columns: 1fr 1fr;
}
.ld-ai-image-skeleton-grid--2 .ld-ai-image-skeleton-item {
    aspect-ratio: 4 / 3;
    min-height: 90px;
}
.ld-ai-image-skeleton-grid--3,
.ld-ai-image-skeleton-grid--4 {
    grid-template-columns: 1fr 1fr;
}
.ld-ai-image-skeleton-grid--3 .ld-ai-image-skeleton-item,
.ld-ai-image-skeleton-grid--4 .ld-ai-image-skeleton-item {
    aspect-ratio: 4 / 3;
}
.ld-ai-image-skeleton-grid--5,
.ld-ai-image-skeleton-grid--6 {
    grid-template-columns: repeat(3, 1fr);
}
.ld-ai-image-skeleton-grid--5 .ld-ai-image-skeleton-item,
.ld-ai-image-skeleton-grid--6 .ld-ai-image-skeleton-item {
    aspect-ratio: 1;
}
.ld-ai-image-skeleton-item {
    display: block;
    width: 100%;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    overflow: hidden;
}
.ld-ai-image-skeleton-item.ld-sk {
    background: linear-gradient(90deg, var(--ld-gray-200) 25%, var(--ld-gray-100) 50%, var(--ld-gray-200) 75%);
    background-size: 800px 100%;
    animation: ld-shimmer 1.4s ease-in-out infinite;
}
.ld-ai-image-skeleton-item--done {
    animation: none;
    background-color: var(--ld-gray-100);
    background-size: cover;
    background-position: center;
}
.ld-ai-image-loading-status {
    margin: 0.875rem 0 0;
    font-size: var(--ld-font-size-sm);
    color: var(--ld-gray-500);
    text-align: center;
}
.ld-ai-image-step-error {
    padding: 0 1.25rem 1rem;
}
.ld-ai-image-error-msg {
    margin: 0;
    padding: 0.75rem;
    font-size: var(--ld-font-size-sm);
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: var(--ld-radius-sm);
}
.ld-ai-image-footer {
    background: var(--ld-gray-50);
}
.ld-ai-image-footer-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}
.ld-ai-image-usage {
    font-size: 0.6875rem;
    color: var(--ld-gray-400);
    line-height: 1.2;
    cursor: help;
    flex-shrink: 0;
}
.ld-ai-image-usage .ld-tooltip {
    max-width: 180px;
    white-space: normal;
    text-align: center;
}
.ld-ai-image-success-overlay {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(250, 250, 250, 0.72);
    animation: ld-ai-image-success-in 0.2s ease;
}
.ld-ai-image-success-overlay.ld-ai-image-success-out {
    animation: ld-ai-image-success-out 0.32s ease forwards;
}
.ld-ai-image-success-toast {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.625rem;
    padding: 1.375rem 2rem;
    background: #fff;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
    animation: ld-ai-image-success-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ld-ai-image-success-overlay.ld-ai-image-success-out .ld-ai-image-success-toast {
    animation: ld-ai-image-success-out-toast 0.32s ease forwards;
}
.ld-ai-image-success-icon {
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background: var(--ld-success-bg);
    color: var(--ld-success);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ld-ai-image-success-icon svg {
    width: 26px;
    height: 26px;
}
.ld-ai-image-success-text {
    font-size: var(--ld-font-size-sm);
    font-weight: 600;
    color: var(--ld-gray-900);
}
@keyframes ld-ai-image-success-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ld-ai-image-success-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes ld-ai-image-success-pop {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes ld-ai-image-success-out-toast {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.96); }
}

.alternatives-btn:hover { transform: scale(1.05); }
.alternatives-btn:disabled { opacity: 0.6; cursor: wait; }
.ld-ai-skeleton { padding: 0.75rem; background: var(--ld-gray-50); border-radius: var(--ld-radius-md); margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ld-ai-skeleton-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
.ld-ai-skeleton-label { height: 11px; width: 42%; border-radius: 4px; }
.ld-ai-skeleton-badge { height: 11px; width: 16%; border-radius: 4px; }
.ld-ai-skeleton-row { height: 36px; width: 100%; border-radius: var(--ld-radius-md); }
.ld-ai-skeleton-row--short { width: 75%; }
.ld-ai-results { padding: 0.75rem; background: var(--ld-gray-50); border-radius: var(--ld-radius-md); margin-top: 0.5rem; }
.ld-ai-results-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.ld-ai-results-label { font-size: var(--ld-font-size-xs); font-weight: 500; color: var(--ld-gray-600); margin: 0; }
.ld-ai-results-count { font-size: 0.65rem; color: var(--ld-gray-400); }
.ld-ai-options { display: flex; flex-direction: column; gap: 0.375rem; }
.ld-ai-option-btn { padding: 0.5rem 0.75rem; background: var(--ld-gray-50); border: none; border-radius: var(--ld-radius-sm); text-align: left; cursor: pointer; font-size: 0.8rem; color: var(--ld-gray-700); transition: all 0.12s; width: 100%; }
.ld-ai-option-btn:hover { border-color: var(--ld-accent); background: var(--ld-accent-bg); color: var(--ld-gray-900); }
.ld-ai-error { padding: 0.75rem; background: #fef2f2; border-radius: var(--ld-radius-md); margin-top: 0.5rem; font-size: var(--ld-font-size-xs); color: #dc2626; }
.ld-icon-grid-btn { width: 48px; height: 48px; border: none; border-radius: var(--ld-radius-md); background: var(--ld-gray-50); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.12s; }
.ld-icon-grid-btn--hover, .ld-icon-grid-btn:hover { border-color: var(--ld-accent); background: var(--ld-accent-bg); }
.ld-icon-grid-icon { width: 24px; height: 24px; color: var(--ld-gray-600); display: flex; align-items: center; }
.ld-icon-grid-icon svg { width: 24px; height: 24px; }
.ld-section-skeleton { display: none; flex-direction: column; gap: 1.5rem; padding: 1.5rem 0; }
.ld-section-skeleton.is-visible { display: flex; }
.ld-editor-content:not(.ld-editor-ready) .ld-section-skeleton {
    display: flex;
}
.ld-editor-content:not(.ld-editor-ready) .section-panel {
    display: none !important;
}
.ld-editor-content.ld-editor-ready .ld-section-skeleton {
    display: none !important;
}
.ld-section-skeleton__title.ld-sk { height: 22px; width: 38%; border-radius: 6px; }
.ld-section-skeleton__card { background: #fff; border-radius: var(--ld-radius-lg, 12px); padding: 1.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.04); display: flex; flex-direction: column; gap: 1.25rem; }
.ld-section-skeleton__row { display: flex; flex-direction: column; gap: 0.5rem; }
.ld-section-skeleton__label.ld-sk { height: 13px; width: 28%; border-radius: 4px; }
.ld-section-skeleton__input.ld-sk { height: 44px; width: 100%; border-radius: 8px; }
.ld-section-skeleton__textarea.ld-sk { height: 80px; width: 100%; border-radius: 8px; }
.ld-section-skeleton__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ld-section-skeleton__divider { height: 1px; background: var(--ld-gray-100, #F3F4F6); }
.ss-section { display:flex; flex-direction:column; gap:1rem; }
.ss-header-fields { display:flex; flex-direction:column; gap:0.75rem; }
.ss-card { background:white; border:1px solid var(--ld-border); border-radius:var(--ld-radius-sm); padding:1.25rem; }
.ss-card-title { font-size:0.8125rem; font-weight:600; color:var(--ld-gray-500); text-transform:uppercase; letter-spacing:0.05em; margin:0 0 1rem 0; }
.ss-subheading { font-size:0.8125rem; font-weight:600; color:var(--ld-gray-500); margin:0.75rem 0 0.5rem; }
.ss-field { display:flex; flex-direction:column; gap:0.25rem; }
.ss-label { font-size:0.8125rem; font-weight:500; color:var(--ld-gray-700); }
.ss-input { padding:0.5rem 0.75rem; border:1px solid var(--ld-border); border-radius:var(--ld-radius-sm); font-size:0.875rem; font-family:inherit; color:var(--ld-gray-900); background:white; width:100%; box-sizing:border-box; transition:all .15s; }
.ss-input:hover { border-color:var(--ld-gray-300); }
.ss-input:focus { outline:none; border-color:var(--ld-gray-400); box-shadow:0 0 0 3px rgba(0,0,0,0.06); }
.ss-textarea { resize:vertical; min-height:4rem; }
.ss-checkbox-field { flex-direction:row; align-items:center; }
.ss-checkbox-label { display:flex; align-items:center; gap:0.5rem; cursor:pointer; font-size:0.875rem; color:var(--ld-gray-700); }
.ss-checkbox { accent-color:var(--ld-primary); width:1rem; height:1rem; cursor:pointer; }
.ss-list { display:flex; flex-direction:column; gap:0.75rem; }
.ss-nested-list { margin-top:0.75rem; padding-left:0; }
.ss-nested-label { font-size:0.8rem; font-weight:600; color:var(--ld-gray-500); margin-top:0.25rem; }
.ss-item-card { border-radius:var(--ld-radius-sm); overflow:hidden; background:white; border:1px solid var(--ld-border); }
.ss-item-header { display:flex; align-items:center; gap:0.5rem; padding:0.75rem 1rem; background:var(--ld-gray-50); cursor:pointer; border-bottom:1px solid var(--ld-border); }
.ss-item-card.ss-collapsed .ss-item-header { border-bottom:none; }
.ss-item-title { font-size:0.875rem; font-weight:600; color:var(--ld-gray-700); flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ss-item-toggle { background:none; border:none; cursor:pointer; font-size:0.75rem; color:var(--ld-gray-400); padding:0; flex-shrink:0; transition:transform .2s; }
.ss-item-card.ss-collapsed .ss-item-toggle { transform:rotate(-90deg); }
.ss-item-body { display:flex; flex-direction:column; gap:0.875rem; padding:1rem; }
.ss-item-card.ss-collapsed .ss-item-body { display:none; }
.ss-remove-btn { background:none; border:none; cursor:pointer; color:var(--ld-gray-400); padding:0.25rem; display:flex; align-items:center; flex-shrink:0; border-radius:4px; transition:all .15s; }
.ss-remove-btn:hover { color:#ef4444; background:rgba(239,68,68,0.1); }
.ss-add-btn { align-self:flex-start; padding:0.5rem 1rem; background:white; color:var(--ld-gray-900); border:1px solid var(--ld-border); border-radius:var(--ld-radius-sm); font-size:var(--ld-font-size-sm,0.875rem); font-weight:600; cursor:pointer; transition:all .15s; display:inline-flex; align-items:center; gap:0.5rem; }
.ss-add-btn:hover { background:var(--ld-gray-50); border-color:var(--ld-gray-300); }
.ss-add-btn--secondary { background:white; color:var(--ld-gray-900); border:1px solid var(--ld-border); }
.ss-add-btn--secondary:hover { background:var(--ld-gray-50); border-color:var(--ld-gray-300); }
.ss-image-row { display:flex; gap:0.5rem; align-items:center; }
.ss-image-row .ss-input { flex:1; }
.ss-image-preview { width:72px; height:72px; border-radius:var(--ld-radius-sm); object-fit:cover; margin-bottom:0.375rem; border:1px solid var(--ld-border); }
.ss-upload-btn { display:inline-flex; align-items:center; gap:0.375rem; padding:0.5rem 0.75rem; background:var(--ld-gray-100); color:var(--ld-gray-700); border:1px solid var(--ld-border); border-radius:var(--ld-radius-sm); font-size:0.8125rem; cursor:pointer; white-space:nowrap; flex-shrink:0; transition:all .15s; }
.ss-upload-btn:hover { background:var(--ld-gray-200); }
.ss-upload-btn:disabled { opacity:0.5; cursor:wait; }
select.ss-input { appearance:auto; }
.ss-nested-list .ss-item-card { background:var(--ld-gray-50); }
.ss-nested-list .ss-item-header { background:white; }
.ss-nested-list .ss-item-body { background:white; }
.ss-layout-picker { display:flex; flex-direction:column; gap:0.5rem; padding-bottom:1rem; margin-bottom:0.25rem; }
.ss-layout-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:0.625rem; }
.ss-layout-opt { display:flex; flex-direction:column; padding:0.625rem 0.75rem; border:1px solid var(--ld-border); border-radius:var(--ld-radius-sm); cursor:pointer; background:white; transition:border-color .15s, background .15s; user-select:none; }
.ss-layout-opt:hover { border-color:var(--ld-gray-400); }
.ss-layout-opt--active { border-color:var(--ld-primary); background:rgba(79,70,229,0.04); }
.ss-layout-label { font-size:0.8125rem; font-weight:700; color:var(--ld-gray-900); line-height:1.3; }
.ss-layout-opt--active .ss-layout-label { color:var(--ld-primary); }
.ss-layout-desc { font-size:0.7rem; color:var(--ld-gray-500); margin-top:0.25rem; line-height:1.4; }

/* =====================================================
   TOOLTIPS (SEO action buttons)
   ===================================================== */
.ld-seo-action-wrap, .ld-seo-calendar-day[data-tooltip], p.ld-seo-post-date[data-tooltip] { position: relative; }
.ld-seo-action-wrap::after, .ld-seo-calendar-day[data-tooltip]::after, p.ld-seo-post-date[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #111827; color: white; font-size: 11px; font-weight: 500; white-space: nowrap; padding: 4px 8px; border-radius: 5px; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 100; }
.ld-seo-action-wrap::before, .ld-seo-calendar-day[data-tooltip]::before, p.ld-seo-post-date[data-tooltip]::before { content: ''; position: absolute; bottom: calc(100% + 1px); left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: #111827; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 100; }
.ld-seo-action-wrap:hover::after, .ld-seo-action-wrap:hover::before, .ld-seo-calendar-day[data-tooltip]:hover::after, .ld-seo-calendar-day[data-tooltip]:hover::before, p.ld-seo-post-date[data-tooltip]:hover::after, p.ld-seo-post-date[data-tooltip]:hover::before { opacity: 1; }
.ld-seo-post-card:first-child .ld-seo-action-wrap::after { top: calc(100% + 6px); bottom: auto; }
.ld-seo-post-card:first-child .ld-seo-action-wrap::before { top: calc(100% + 1px); bottom: auto; border-top-color: transparent; border-bottom-color: #111827; }
.ld-seo-calendar-day[data-tooltip]::after { max-width: 180px; white-space: normal; text-align: center; line-height: 1.3; }

/* =====================================================
   RESPONSIVE — TABLET / MOBILE (<= 1024px)
   Must be at the END to override base rules by cascade.
   ===================================================== */
@media (max-width: 1024px) {

    /* Sidebar: off-canvas drawer from left */
    .ld-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: var(--ld-z-sidebar);
        border-right: 1px solid var(--ld-border);
    }
    .ld-sidebar.open {
        transform: translateX(0) !important;
    }

    /* Main area: full width, no sidebar margin */
    .ld-main {
        margin-left: 0;
        min-width: 0;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        background: #fff;
        z-index: auto;
        position: static;
    }
    .ld-app {
        overflow-x: hidden;
        max-width: 100vw;
        width: 100%;
    }

    /* Content area: full-width on mobile, no side margins */
    .ld-content {
        margin: 0;
        border-radius: 0;
        max-width: 100%;
        width: 100%;
    }
    .ld-mobile-nav {
        display: none;
    }
    .ld-mobile-nav--editor {
        display: flex;
    }
    .ld-universal-header ~ .ld-content {
        margin-top: var(--ld-app-header-height);
        padding: 16px;
    }

    /* Header: full-width, no sidebar offset */
    .ld-editor-header {
        left: 0;
        padding: 0 0.75rem;
        gap: 0.5rem;
        border-bottom: 1px solid var(--ld-border);
    }
    .ld-editor-header-left {
        gap: 0.625rem;
        flex: 1;
        min-width: 0;
    }

    /* Hamburger toggle: visible on mobile */
    .ld-sidebar-toggle {
        display: flex;
    }
    .ld-sidebar-toggle--floating {
        display: none;
    }

    /* Close button inside sidebar: visible */
    .ld-sidebar-close {
        display: flex;
    }

    /* Hide extras on mobile */
    .ld-hide-mobile {
        display: none !important;
    }

    /* Editor actions bar: fixed at bottom — edit page only (has .ld-editor-sidebar) */
    .ld-editor-header:not(.ld-universal-header) .ld-editor-header-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #fff;
        border-top: 1px solid var(--ld-border);
        padding: 0.5rem 0.75rem max(0.25rem, var(--ld-mobile-safe-bottom));
        gap: 0.5rem;
        z-index: var(--ld-z-actionbar);
        display: flex;
        overflow: visible;
        min-height: calc(56px + var(--ld-mobile-safe-bottom));
        box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.03);
    }
    .ld-editor-header:not(.ld-universal-header) .ld-editor-action-btn {
        flex: 1;
        justify-content: center;
        padding: 0.625rem 0.5rem;
        font-size: 13px;
        min-height: 44px;
    }
    .ld-editor-header:not(.ld-universal-header) .ld-editor-action-btn .ld-action-label {
        display: none;
    }
    .ld-editor-header:not(.ld-universal-header) .ld-editor-action-btn.ld-save-btn .ld-action-label,
    .ld-editor-header:not(.ld-universal-header) .ld-editor-action-btn.ld-publish-site-btn .ld-action-label,
    .ld-editor-header:not(.ld-universal-header) .ld-editor-action-btn.ld-preview-btn .ld-action-label {
        display: inline;
    }
    .ld-editor-header:not(.ld-universal-header) .ld-save-btn-pulse-wrap .ld-publish-site-btn {
        flex: 1;
        width: 100%;
    }
    .ld-editor-header:not(.ld-universal-header) .ld-preview-btn {
        flex: 1 1 0;
    }
    .ld-editor-header:not(.ld-universal-header) .ld-save-btn-pulse-wrap {
        flex: 1 1 0;
        display: flex;
    }
    .ld-editor-header:not(.ld-universal-header) .ld-save-btn-pulse-wrap #save-btn {
        flex: 1;
        width: 100%;
    }
    .ld-editor-header:not(.ld-universal-header) .ld-editor-more-wrap {
        flex: 0 0 auto;
    }
    .ld-editor-header:not(.ld-universal-header) .ld-editor-more-btn {
        flex: 0 !important;
        width: 44px;
    }
    .ld-universal-header .ld-view-site-btn .ld-action-label,
    .ld-universal-header .ld-view-site-btn.ld-view-site-btn--preview .ld-action-label {
        display: none;
    }
    .ld-universal-header .ld-view-site-btn:not(.ld-view-site-btn--preview) {
        display: none;
    }
    .ld-universal-header .ld-view-site-btn,
    .ld-universal-header .ld-publish-site-btn,
    .ld-universal-header .ld-editor-more-btn {
        padding: 0.5rem 0.625rem;
        min-width: 44px;
        justify-content: center;
        font-size: 13px;
    }
    .ld-universal-header .ld-publish-site-btn .ld-action-label {
        display: inline;
    }
    .ld-universal-header .ld-header-site-actions {
        gap: 0.375rem;
    }
    .ld-editor-header:not(.ld-universal-header) .ld-editor-more-dropdown {
        top: auto;
        bottom: calc(100% + 6px);
    }

    /* Content area: space at bottom for fixed action bar */
    .ld-editor-content {
        padding-bottom: calc(var(--ld-mobile-actionbar-height) + var(--ld-mobile-safe-bottom) + 1rem);
    }

    /* Name truncation */
    .ld-editor-header-name {
        font-size: 14px;
        max-width: 180px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* RESPONSIVE — SMALL PHONE (<= 640px) — after 1024 block for cascade */
@media (max-width: 640px) {
    .ld-content,
    .ld-universal-header ~ .ld-content {
        padding: 12px;
        margin-top: var(--ld-app-header-height);
    }

    /* Prevent known dense grids from overflowing on small screens */
    .ld-text-scale-grid,
    .ld-form-templates,
    .ld-image-ratio-options,
    #logo-ai-grid,
    .ld-upgrade-metrics-preview {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .ld-content table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}

/* RESPONSIVE — SMALL PHONE (<= 480px) */
@media (max-width: 480px) {
    .ld-text-scale-grid,
    .ld-form-templates,
    .ld-image-ratio-options,
    #logo-ai-grid,
    .ld-upgrade-metrics-preview {
        grid-template-columns: 1fr !important;
    }
    .ld-editor-header-name {
        font-size: 13px;
        max-width: 120px;
    }
    .ld-editor-header-domain {
        display: none;
    }
    .ld-editor-content {
        padding: 1.5rem 1rem calc(var(--ld-mobile-actionbar-height) + var(--ld-mobile-safe-bottom) + 1rem);
    }
}

/* =====================================================
   BOTTOM SHEET MODALS (mobile <=768px)
   ===================================================== */
@media (max-width: 768px) {
    .ld-modal-overlay,
    .ld-modal:not(.ld-modal-overlay),
    .ld-ai-modal-overlay,
    .ld-seo-modal-overlay,
    .ld-draft-modal,
    #dns-why-modal,
    .ld-live-modal-overlay,
    .ld-confirm-overlay,
    #ld-text-ai-overlay,
    .ld-reseller-modal {
        align-items: flex-end !important;
        justify-content: center;
        padding: var(--ld-mobile-safe-top) 0 0 !important;
    }

    .ld-modal-box,
    .ld-modal-content,
    .ld-modal-overlay .ld-modal,
    .ld-ai-modal,
    .ld-seo-modal,
    .ld-draft-modal-content,
    #dns-why-modal .ld-dns-modal-box,
    .ld-live-modal-box,
    .ld-confirm-sheet,
    .ld-sheet-panel,
    .ld-catalog-prod-modal-box,
    #ld-text-ai-overlay .ld-text-ai-modal,
    .ld-reseller-modal-content {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 85vh;
        max-height: var(--ld-mobile-sheet-max-height);
        overflow-y: auto;
        margin: 0;
        padding-bottom: max(1rem, var(--ld-mobile-safe-bottom));
        animation: ld-sheet-slide-up 0.3s ease;
        overscroll-behavior: contain;
    }

    .ld-modal-box::before,
    .ld-modal-content::before,
    .ld-ai-modal::before,
    .ld-seo-modal::before,
    .ld-draft-modal-content::before,
    #dns-why-modal .ld-dns-modal-box::before,
    .ld-live-modal-box::before,
    .ld-confirm-sheet::before,
    .ld-sheet-panel::before,
    .ld-catalog-prod-modal-box::before,
    #ld-text-ai-overlay .ld-text-ai-modal::before,
    .ld-reseller-modal-content::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        background: var(--ld-gray-300);
        border-radius: 2px;
        margin: 0.75rem auto 0.5rem;
    }

    .ld-ai-modal-footer {
        border-radius: 0;
    }

    .ld-mobile-nav--editor {
        display: flex;
        margin: 0 -1rem 1rem;
        padding: 0 0.75rem;
        gap: 0.875rem;
    }

    /* On mobile the editor nav sits right below the fixed header, not inside a bottom sheet */
    .ld-mobile-nav--editor::before {
        display: none !important;
    }
}

@keyframes ld-sheet-slide-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@media (pointer: coarse) {
    .ld-cmd-close,
    .ld-user-avatar-btn,
    .ld-modal-close,
    .ld-ai-modal-close,
    .ld-seo-modal-close,
    .ld-live-modal-close,
    .ld-preview-device-btn,
    .ld-sortable-arrow,
    .ld-form-field-delete,
    .ld-form-field-option-delete,
    .ld-editor-more-btn,
    .ld-catalog-icon-btn,
    .ld-seo-action-btn,
    .ld-btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    .ld-filter-btn,
    .ld-period-btn,
    .ld-mobile-nav-pill,
    .section-tab {
        min-height: 40px;
    }
}




/* Blog + Mensajes: toolbar, spacing alineado a Estadísticas */
.ld-panel-controls {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 2.5rem !important;
}
.ld-leads-dashboard > .ld-an-kpis,
.ld-seo-dashboard > .ld-an-kpis {
    margin-bottom: 0;
}
.ld-leads-dashboard .ld-panel-controls,
.ld-seo-dashboard .ld-panel-controls {
    margin-top: 1.25rem;
    margin-bottom: 1rem;
}
.ld-leads-dashboard .ld-panel-controls .ld-help-search-wrap,
.ld-seo-dashboard .ld-panel-controls .ld-help-search-wrap,
.ld-leads-dashboard .ld-panel-controls .ld-help-filters,
.ld-seo-dashboard .ld-panel-controls .ld-help-filters {
    margin: 0;
}
.ld-leads-dashboard .ld-panel-section-title,
.ld-seo-dashboard .ld-panel-section-title {
    margin: 0 0 0.75rem;
}
.ld-leads-dashboard .ld-panel-section-title + .ld-empty-state-cta,
.ld-seo-dashboard .ld-panel-section-title + .ld-empty-state-cta,
.ld-leads-dashboard .ld-panel-section-title + .ld-leads-list,
.ld-seo-dashboard .ld-panel-section-title + .ld-seo-tab-content,
.ld-seo-dashboard .ld-panel-section-title + #ia-search-empty-global {
    margin-top: 0;
}
.ld-leads-dashboard .ld-empty-state-cta,
.ld-seo-dashboard .ld-empty-state-cta {
    margin: 0;
}
.ld-leads-dashboard .ld-panel-section-title--secondary,
.ld-seo-dashboard .ld-panel-section-title--secondary {
    margin-top: 1.5rem;
}
.ld-leads-dashboard .ld-panel-section-desc {
    font-size: 0.8125rem;
    color: var(--ld-gray-500);
    margin: 0 0 0.75rem;
}
.ld-leads-dashboard .ld-panel-section-title + .ld-panel-section-desc {
    margin-top: -0.25rem;
}
.ld-search-hidden {
    display: none !important;
}

/* Mensajes: modal configurar asistente */
#ld-chat-config-modal.ld-seo-modal-overlay {
    animation: ld-modal-fadein 0.2s ease;
}
.ld-chat-wizard-modal.ld-seo-modal {
    animation: modalSlideIn 0.2s ease-out;
    position: relative;
    z-index: 1;
}
.ld-chat-wizard-modal .ld-chat-wizard-header {
    justify-content: flex-end;
    padding: 28px 28px 0;
    border-bottom: none;
    min-height: 0;
}
.ld-chat-wizard-modal .ld-chat-wizard-body {
    padding: 0 58px 28px;
}
.ld-chat-wizard-modal .ld-chat-wizard-card {
    box-shadow: none;
    border: none;
    padding: 0;
    background: transparent;
}
.ld-chat-wizard-modal #chat-step-wizard .ld-chat-wizard-card {
}
.ld-chat-wizard-modal .seo-wizard-progress {
    margin: 2px 0 34px;
}
.ld-chat-wizard-modal .seo-wizard-title {
    text-align: center;
    margin: 0 0 0.5rem;
}
.ld-chat-wizard-modal .seo-wizard-desc {
    text-align: center;
    margin: 0 0 34px;
}
.ld-chat-wizard-modal #chat-step-wizard .ld-chat-config-fields,
.ld-chat-wizard-modal #chat-step-wizard .ld-chat-wizard-finish {
    min-height: 160px;
}
.ld-chat-config-step { display: none; }
.ld-chat-config-step.active {
    display: block;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}
.ld-chat-wizard-modal .ld-chat-config-step.active.seo-step-anim-forward {
    animation: seoWizardStepInFwd 0.18s ease-out both;
}
.ld-chat-wizard-modal .ld-chat-config-step.active.seo-step-anim-back {
    animation: seoWizardStepInBack 0.18s ease-out both;
}
.ld-chat-wizard-modal .ld-chat-wizard-card.seo-step-anim-forward {
    animation: seoWizardStepInFwd 0.18s ease-out both;
}
.ld-chat-wizard-modal .ld-chat-wizard-card.seo-step-anim-back {
    animation: seoWizardStepInBack 0.18s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
    #ld-chat-config-modal.ld-seo-modal-overlay,
    .ld-chat-wizard-modal.ld-seo-modal {
        animation: none;
    }
    .ld-chat-wizard-modal .ld-chat-config-step.active.seo-step-anim-forward,
    .ld-chat-wizard-modal .ld-chat-config-step.active.seo-step-anim-back,
    .ld-chat-wizard-modal .ld-chat-wizard-card.seo-step-anim-forward,
    .ld-chat-wizard-modal .ld-chat-wizard-card.seo-step-anim-back {
        animation: none;
    }
}
.ld-chat-config-modal .ld-chat-config-header {
    justify-content: flex-end;
}
.ld-chat-config-modal #chat-config-header-edit {
    justify-content: space-between;
    padding: 28px;
    border-bottom: 1px solid var(--ld-border);
}
.ld-chat-config-modal-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ld-chat-config-modal-title h3 {
    margin: 0;
}
.ld-chat-config-what-link {
    background: none;
    border: none;
    padding: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ld-primary);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ld-chat-config-what-link:hover {
    color: color-mix(in srgb, var(--ld-primary) 80%, black);
}
.ld-chat-config-intro {
    padding-bottom: 0.75rem;
}
.ld-chat-config-intro-list {
    list-style: none;
    margin: 1.25rem auto 0;
    padding: 0;
    max-width: 28rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.ld-chat-config-intro-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--ld-gray-500);
    line-height: 1.45;
}
.ld-chat-config-intro-list svg {
    flex-shrink: 0;
    color: var(--ld-primary);
    margin-top: 0.125rem;
}
.ld-chat-config-intro-foot {
    margin: 1.25rem 0 0;
    font-size: 0.875rem;
    color: var(--ld-gray-500);
    line-height: 1.5;
    max-width: 26rem;
    margin-left: auto;
    margin-right: auto;
}
.ld-chat-config-status-banner {
    padding: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.45;
    margin-bottom: 0.5rem;
}
.ld-chat-config-status-banner--on {
    background: transparent;
    border: 0;
    color: var(--ld-gray-900);
}
.ld-chat-config-status-banner--off {
    background: transparent;
    border: 0;
    color: var(--ld-gray-600);
}
.ld-chat-config-status-banner--interactive {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.ld-chat-config-status-banner-label {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--ld-gray-900);
}
.ld-chat-config-toggle {
    margin-left: auto;
}
.ld-chat-wizard-summary {
    background: var(--ld-gray-50);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    padding: 1rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--ld-gray-600);
    line-height: 1.6;
}
.ld-chat-wizard-summary p {
    margin: 0 0 0.375rem;
}
.ld-chat-wizard-summary p:last-child {
    margin-bottom: 0;
}
.ld-chat-wizard-summary strong {
    color: var(--ld-gray-900);
}
.ld-chat-config-publish-row--prominent {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
    background: var(--ld-gray-50);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    padding: 1rem;
}
.ld-chat-wizard-modal .ld-seo-modal-footer {
    justify-content: flex-end;
    padding: 24px 28px !important;
}
.ld-chat-wizard-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ld-chat-config-modal .ld-chat-config-fields {
    margin-top: 0;
}
.ld-chat-config-fields--edit {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ld-chat-tone-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.ld-chat-tone-chips--wizard {
    justify-content: center;
}
.ld-chat-wizard-modal .ld-chat-tone-chips--wizard .ld-chat-tone-chip {
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
}
.ld-chat-tone-chip {
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    background: #fff;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ld-gray-700);
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.ld-chat-tone-chip:hover {
    border-color: var(--ld-gray-300);
    background: var(--ld-gray-50);
}
.ld-chat-tone-chip.active {
    border-color: var(--ld-primary);
    background: color-mix(in srgb, var(--ld-primary) 8%, white);
    color: var(--ld-primary);
}
.ld-label-optional {
    font-weight: 400;
    color: #9CA3AF;
}
.ld-chat-config-publish-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--ld-border);
}
.ld-chat-config-publish-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ld-gray-900);
    cursor: pointer;
}
.ld-chat-config-publish-hint {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--ld-gray-500);
    line-height: 1.4;
}
.ld-chat-config-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.ld-chat-config-footer--intro {
    justify-content: flex-end;
}
.ld-chat-config-footer--intro .ld-seo-modal-footer-actions,
.ld-chat-config-footer--finish .ld-seo-modal-footer-actions {
    margin-left: auto;
}
.ld-chat-config-footer--finish .ld-chat-wizard-footer-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ld-chat-config-saved,
.ld-chat-config-saving {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
}
.ld-chat-config-saved {
    color: var(--ld-success);
}
.ld-chat-config-saving {
    color: var(--ld-gray-500);
}

.ld-modal-success-overlay,
.ld-chat-config-success-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    background: rgba(250, 250, 250, 0.72);
    animation: ld-modal-success-in 0.2s ease;
}
.ld-modal-success-overlay.ld-modal-success-overlay-out,
.ld-chat-config-success-overlay.ld-chat-config-success-overlay-out,
.ld-chat-config-success-overlay.ld-modal-success-overlay-out {
    animation: ld-modal-success-out 0.32s ease forwards;
}
.ld-modal-success-toast,
.ld-chat-config-success-toast {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 20px 28px;
    background: #fff;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-lg, 12px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.04);
    animation: ld-modal-success-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ld-modal-success-overlay-out .ld-modal-success-toast,
.ld-chat-config-success-overlay-out .ld-chat-config-success-toast,
.ld-chat-config-success-overlay-out .ld-modal-success-toast {
    animation: ld-modal-success-toast-out 0.32s ease forwards;
}
.ld-modal-success-toast-icon,
.ld-chat-config-success-toast-icon {
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    background: rgba(16, 185, 129, 0.08);
    color: var(--ld-success);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ld-modal-success-toast-icon svg,
.ld-chat-config-success-toast-icon svg {
    width: 26px;
    height: 26px;
}
.ld-modal-success-toast-text,
.ld-chat-config-success-toast-text {
    font-size: 15px;
    font-weight: 500;
    color: var(--ld-gray-700);
    letter-spacing: -0.01em;
    text-align: center;
    max-width: 14rem;
    line-height: 1.4;
}
.ld-seo-strategy-success-overlay .ld-modal-success-toast-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--ld-gray-800);
    letter-spacing: -0.01em;
    text-align: center;
    line-height: 1.35;
}
.ld-seo-strategy-success-overlay .ld-modal-success-toast-sub {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ld-gray-500);
    text-align: center;
    line-height: 1.45;
    max-width: 15rem;
}
.seo-wizard-step.seo-wizard-step--needs-choice .seo-option-list {
    animation: ld-seo-choice-hint 0.45s ease;
}
@keyframes ld-seo-choice-hint {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}
@keyframes ld-modal-success-in {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes ld-modal-success-out {
    from { opacity: 1; }
    to { opacity: 0; }
}
@keyframes ld-modal-success-pop {
    from { opacity: 0; transform: scale(0.88); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes ld-modal-success-toast-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
    .ld-modal-success-overlay,
    .ld-modal-success-toast,
    .ld-chat-config-success-overlay,
    .ld-chat-config-success-toast {
        animation: none;
    }
}





 .section-panel svg:not([class*="w-"]) {
    max-width: 16px !important;
    max-height: 16px !important;
 }