/*
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 */
    --ld-success: #10B981;
    --ld-success-bg: rgba(16, 185, 129, 0.08);
    --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 ? Vercel style */
    --ld-sidebar-width: 260px;
    --ld-sidebar-bg: #FAFAFA;
    --ld-sidebar-text: #4d4d4d;
    --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 ? Vercel */
    --ld-page-bg: #FAFAFA;
    --ld-content-bg: #FFFFFF;
    --ld-border: #E2E2E2;
    
    /* Tipografia ? Inter */
    --ld-font-family: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ld-font-size-xs: 0.75rem;
    --ld-font-size-sm: 0.875rem;
    --ld-font-size-base: 0.9rem;
    --ld-font-size-lg: 1rem;
    --ld-font-size-xl: 1.125rem;
    --ld-font-size-2xl: 1.375rem;
    --ld-font-size-3xl: 1.625rem;
    
    /* 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;
}

/* 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;
}

/* Layout principal */
.ld-app {
    display: flex;
    min-height: 100vh;
}

/* =====================================================
   SIDEBAR ? clara, moderna
   ===================================================== */
.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 var(--ld-sidebar-border);
    display: flex;
    flex-direction: column;
    z-index: 50;
}

.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 {
    flex: 1;
    padding: 0 0.75rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ld-gray-300) transparent;
    padding-bottom: 1rem;
}

.ld-sidebar-nav:hover {
    scrollbar-color: var(--ld-gray-400) 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: 0.7275rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ld-gray-400);
    padding: 1rem 1rem 0.5rem;
    margin: 0;
}

.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: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: 10px;
    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: 11px;
    font-weight: 600;
    line-height: 1;
    background: #ef4444;
    color: white;
    border-radius: 10px;
}

/* User menu en sidebar */
.ld-sidebar-user {
    padding: 0.75rem;
    margin: auto 0.75rem 0.75rem;
    border-radius: var(--ld-radius-sm);
    background: transparent;
    border-top: 1px solid var(--ld-border);
}

.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-info:hover {
    background-color: var(--ld-gray-100);
}

.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);
}

/* 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: #059669;
}

.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--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: #10b981;
}

.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-base);
    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-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;
    }
}

/* DNS pending notice banner */
.ld-dash-dns-notice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: #FFF7ED;
    border: 1px solid #FED7AA;
    border-radius: var(--ld-radius-lg);
    margin-bottom: var(--ld-spacing-5);
}
.ld-dash-dns-notice-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}
.ld-dash-dns-notice-icon {
    width: 22px;
    height: 22px;
    color: #EA580C;
    flex-shrink: 0;
}
.ld-dash-dns-notice-title {
    display: block;
    font-size: var(--ld-font-size-sm);
    font-weight: 600;
    color: #9A3412;
    margin-bottom: 0.125rem;
}
.ld-dash-dns-notice-desc {
    display: block;
    font-size: var(--ld-font-size-xs);
    color: #C2410C;
}
@media (max-width: 600px) {
    .ld-dash-dns-notice {
        flex-direction: column;
        align-items: flex-start;
    }
    .ld-dash-dns-notice > .ld-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Domain link disabled state (DNS pending) */
.ld-dash-hero-domain--disabled {
    color: var(--ld-gray-400);
    cursor: default;
    pointer-events: none;
    text-decoration: none;
}

/* Publish hero card (preview state) */
.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 {
    margin-bottom: 1rem;
}
.ld-dash-publish-hero-icon svg {
    width: 44px;
    height: 44px;
    opacity: 0.9;
}
.ld-dash-publish-hero-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.ld-dash-publish-hero-text {
    font-size: 1rem;
    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: 1rem;
    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: 0.875rem;
    transition: color 0.15s;
}
.ld-dash-publish-hero-links a:hover {
    color: #fff;
}
.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: 1.25rem;
    }
    .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;
}
.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: #059669;
}
.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 {
    background: white;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    padding: 1.75rem 2rem;
    margin-bottom: var(--ld-spacing-5);
}
.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: #f0fdf4;
    border-color: #bbf7d0;
}
.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;
}

@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;
    }
}

/* =====================================================
   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: #059669;
}

.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: #059669;
}

.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: 200;
    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(0,0,0,0.4);
    z-index: 150;
}
.ld-sidebar-overlay.active {
    display: block;
}

/* Editor header actions */
.ld-editor-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.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;
}

/* -- Editor "More" dropdown (3 dots) -------------------------------------- */
.ld-editor-more-wrap {
    position: relative;
}
.ld-editor-more-btn {
    padding: 0.65rem 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: 1000;
    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: 0.8125rem;
    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: 1.75rem; font-weight: 700; color: #fff; margin: 0 0 0.75rem; letter-spacing: -0.025em; }
.ld-aff-join-hero p { font-size: 1rem; 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: 1rem; 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: 0.8125rem; 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: 0.9375rem; font-weight: 600; color: var(--ld-gray-900); margin: 0 0 0.375rem; }
.ld-aff-benefit p { font-size: 0.8125rem; 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: 0.75rem; 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: 0.875rem; 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: 0.75rem; 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: 0.9375rem; }
.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: 1.25rem; font-weight: 700; color: #fff; margin: 0 0 0.25rem; }
.ld-aff-dash-hero-top p { font-size: 0.8125rem; 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: 0.75rem; 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: 0.75rem; 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: 2.5rem; font-weight: 700;
    color: #fff; line-height: 1; margin-bottom: 0.25rem;
}
.ld-aff-dash-balance-sub { font-size: 0.8125rem; 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: 0.8125rem; 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: 1.125rem; font-weight: 700; color: #fff; margin-bottom: 0.15rem; display: block; }
.ld-aff-dash-stat-label { font-size: 0.7rem; 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: 1.375rem; }
    .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: 2rem; }
}

/* 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: var(--ld-gray-100);
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    padding: 4px;
    margin-bottom: var(--ld-spacing-4);
}
.ld-help-filters + .ld-editor-card-title {
    margin-top: 0;
    margin-bottom: -0.25rem;
}

.ld-filter-btn {
    padding: 0.4rem .925rem;
    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;
        font-weight: 500;

}

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

.ld-filter-btn.active {
    background: #fff;
    color: var(--ld-gray-900);
    font-weight: 500;
}

/* 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-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 {
}

@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;
    }
}

/* Modals */
.ld-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9999;
    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: 1.25rem;
    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;
}

/* 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: 0.75rem;
    display: block;
    margin-top: 0.15rem;
}
.ld-editor-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    font-size: 0.9375rem;
    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-editor-textarea {
    resize: vertical;
    min-height: 80px;
}
.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-site-selector {
    padding: 0 0 0.5rem;
}

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

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

.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: 2.5rem 2rem 4rem;
}

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

/* -- Preview Modal ------------------------------------------------------ */
.ld-preview-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    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: 0.8125rem;
    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: 1.25rem;
    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-xs);
    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-accent);
}
.ld-editor-section-toggle input[type="checkbox"]:checked ~ .ld-toggle-track::after {
    transform: translateX(16px);
}

/* -- Grupos de campos ----------------------------------------------------- */
.ld-editor-fields {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.ld-editor-field-group {
    display: flex;
    gap: 0.5rem;
    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;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ld-gray-50);
    z-index: 1;
}
@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: 0.8125rem;
    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;
}
/* Palette grid - modern card layout */
.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-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-card {
    background: white;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    padding: 1rem;
    margin-bottom: 0.625rem;
}
.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-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" con borde punteado ----------------------------------- */
.ld-add-btn {
    width: 100%;
    padding: 0.625rem;
    border: 1.5px dashed var(--ld-border);
    border-radius: var(--ld-radius-md);
    background: transparent;
    color: var(--ld-gray-500);
    font-size: var(--ld-font-size-sm);
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    transition: all 0.12s;
}
.ld-add-btn:hover {
    border-color: var(--ld-gray-400);
    color: var(--ld-gray-700);
    background: var(--ld-gray-50);
}
.ld-add-btn svg { width: 15px; height: 15px; }

/* -- 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 {
    border: 1.5px dashed var(--ld-border);
    border-radius: var(--ld-radius-md);
    padding: 1.25rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--ld-gray-50);
}
.ld-upload-area:hover {
    border-color: var(--ld-gray-400);
    background: #fff;
}
.ld-upload-area svg { width: 28px; height: 28px; color: var(--ld-gray-300); margin: 0 auto 0.5rem; display: block; }
.ld-upload-area-title { color: var(--ld-gray-700); font-weight: 500; font-size: var(--ld-font-size-sm); margin-bottom: 0.2rem; }
.ld-upload-area-hint  { color: var(--ld-gray-400); font-size: var(--ld-font-size-xs); }

/* -- 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: #f0fdf4; color: #166534; }
.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: #f0fdf4; }

/* -- 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: 0.625rem;
    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-page-bg);
    border-bottom: 1px solid #ededed;
    padding: 0.625rem 1.5rem;
    position: fixed;
    top: 0;
    left: var(--ld-sidebar-width);
    right: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: 52px;
    box-sizing: border-box;
}
.ld-editor-header + * {
    margin-top: 52px;
}
.ld-universal-header ~ .ld-content {
    margin-top: 52px;
    padding: 56px 72px 24px;
}
.ld-content--no-appheader {
    margin-top: 0 !important;
}

/* -- 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: 0.85rem;
    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: 50;
    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: .9rem;
    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: 0.6875rem;
    color: var(--ld-gray-400);
    line-height: 1.2;
}
.ld-plan-tag {
    padding: 0.2rem 0.5rem;
    border-radius: var(--ld-radius-sm);
    font-size: 0.6875rem;
    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.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    background: #fff;
    color: var(--ld-gray-400);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
    flex: 1;
    max-width: 600px;
}
.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);
}

/* -- Command Palette modal ------------------------------------------------ */
.ld-cmd-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    animation: ldCmdFadeIn 0.12s ease-out;
}
@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: 520px;
    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: 0.9375rem;
    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: 360px;
    overflow-y: auto;
    padding: 0.375rem 0;
}
.ld-cmd-group {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.6875rem;
    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.5rem;
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.875rem;
    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; }
.ld-cmd-item--sub {
    padding-left: 1rem;
}
.ld-cmd-item-sub {
    font-weight: 400;
    font-size: 0.8125rem;
    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: 0.875rem;
}
.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); }
.ld-cmd-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--ld-gray-400);
    font-size: 0.875rem;
}

/* -- 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: 0.6875rem;
    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 10px 25px -5px rgba(0,0,0,0.1), 0 4px 10px -5px rgba(0,0,0,0.04);
    min-width: 220px;
    z-index: 50;
    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-header {
    padding: 0.75rem 1rem;
}
.ld-user-dropdown-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ld-gray-900);
    line-height: 1.3;
}
.ld-user-dropdown-email {
    font-size: 0.75rem;
    color: var(--ld-gray-400);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ld-user-dropdown-divider {
    height: 1px;
    background: var(--ld-border);
}
.ld-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--ld-gray-600);
    text-decoration: none;
    transition: background 0.08s;
    cursor: pointer;
}
.ld-user-dropdown-item:hover { background: var(--ld-gray-50); color: var(--ld-gray-900); }
.ld-user-dropdown-logout { color: #ef4444; }
.ld-user-dropdown-logout:hover { background: #fef2f2; color: #dc2626; }
.ld-user-dropdown-plan {
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    color: var(--ld-gray-500);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ld-user-dropdown-plan .ld-plan-tag {
    font-size: 0.625rem;
}

/* -- Responsive: Command Palette & User Avatar ----------------------------- */
@media (max-width: 768px) {
    .ld-cmd-trigger {
        max-width: none;
    }
    .ld-cmd-overlay { padding-top: 5vh; }
    .ld-cmd-modal { max-width: calc(100% - 2rem); margin: 0 1rem; }
}
@media (max-width: 480px) {
    .ld-cmd-trigger-text { display: none; }
    .ld-cmd-trigger {
        padding: 0.375rem 0.5rem;
        flex: 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;
}
.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;
}
.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;
}
.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%;
    height: 42px;
    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.12s;
}
.ld-icon-pick-btn:hover { border-color: var(--ld-gray-300); }

/* -- 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-label-hint {
    font-weight: 400;
    color: var(--ld-gray-400);
    font-size: var(--ld-font-size-xs);
    display: block;
}
.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 (nuevas clases) ------------------------------------------- */
.ld-editor-upload-area {
    border: 1.5px dashed var(--ld-border);
    border-radius: var(--ld-radius-md);
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s;
    background: var(--ld-gray-50);
}
.ld-editor-upload-area:hover { border-color: var(--ld-gray-400); background: #fff; }
.ld-editor-upload-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto 0.75rem;
    display: block;
    color: var(--ld-gray-300);
}
.ld-editor-upload-title {
    color: var(--ld-gray-700);
    font-weight: 500;
    font-size: var(--ld-font-size-sm);
    margin-bottom: 0.25rem;
}
.ld-editor-upload-hint {
    color: var(--ld-gray-400);
    font-size: var(--ld-font-size-xs);
}
.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;
}

/* -- 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: #f0fdf4;
    border: 1px solid #bbf7d0;
    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);
}

/* -- Add item button ------------------------------------------------------- */
.ld-add-item-btn {
    width: 100%;
    padding: 0.75rem;
    border: 1.5px dashed var(--ld-border);
    border-radius: var(--ld-radius-md);
    background: transparent;
    color: var(--ld-gray-500);
    font-weight: 500;
    font-size: var(--ld-font-size-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: all 0.12s;
}
.ld-add-item-btn:hover {
    border-color: var(--ld-gray-400);
    color: var(--ld-gray-700);
    background: var(--ld-gray-50);
}

/* -- 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 -------------------------------------------------------------- */
.ld-hours-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-hours-row--closed { background: #fef2f2; }
.ld-hours-day {
    width: 60px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ld-gray-700);
    flex-shrink: 0;
}
.ld-hours-check {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    cursor: pointer;
    font-size: 0.65rem;
    color: var(--ld-gray-500);
}
.ld-hours-inputs {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
}
.ld-time-input {
    padding: 0.25rem 0.4rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-sm);
    font-size: 0.75rem;
    width: 82px;
    color: var(--ld-gray-700);
    background: #fff;
}
.ld-hours-sep {
    color: var(--ld-gray-500);
    font-size: 0.75rem;
}
.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: 0.8125rem;
    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;
}

/* -- 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-template-card.active .ld-form-template-name {
    color: var(--ld-accent);
}

.ld-form-fields-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ld-form-field-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--ld-border);
    border-radius: var(--ld-radius-md);
    background: var(--ld-gray-25);
}
.ld-form-field-drag {
    cursor: grab;
    padding: 0.25rem;
    display: flex;
    align-items: center;
}
.ld-form-field-drag:active { cursor: grabbing; }
.ld-form-field-inputs {
    display: flex;
    flex: 1;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}
.ld-form-field-label {
    flex: 1 1 150px;
    min-width: 100px;
}
.ld-form-field-type {
    flex: 0 0 auto;
    width: 130px;
}
.ld-form-field-required {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--ld-gray-600);
    white-space: nowrap;
    cursor: pointer;
}
.ld-form-field-required input { cursor: pointer; accent-color: var(--ld-accent); }
.ld-form-field-extra {
    width: 100%;
    padding-left: 2rem;
}
.ld-form-field-options {
    width: 100%;
    font-size: 0.8125rem;
}
.ld-form-field-delete {
    background: none;
    border: none;
    padding: 0.375rem;
    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);
}

.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(0,0,0,0.45);
    z-index: 1000;
    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;
}

/* -- 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-add-btn,
.ld-editor-panel .ld-add-item-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;
}

/* 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: 0.6875rem;
    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: 3rem;
    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: 1.125rem;
    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: 0.75rem;
    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: 0.9375rem;
    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: 1rem;
}

/* ---- 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: 2rem;
    font-weight: 700;
    color: var(--ld-gray-900);
    letter-spacing: -0.025em;
    margin: 0 0 1rem;
}
.ld-partners-features-left p {
    font-size: 1.0625rem;
    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: 1.125rem;
    font-weight: 600;
    color: var(--ld-gray-900);
    margin: 0 0 0.5rem;
}
.ld-partners-feature-item p {
    font-size: 1rem;
    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: 1.75rem;
    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: 1.125rem;
    font-weight: 600;
    color: var(--ld-gray-900);
    margin: 0 0 0.75rem;
}
.ld-partners-dark-item p {
    font-size: 0.875rem;
    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: 0.875rem;
    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: 2.25rem; }
    .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: 2rem; }
}

/* ========================================
   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: 1.5rem;
    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: 3rem;
    font-weight: 700;
    line-height: 1;
}
.ld-aff-credits-label {
    font-size: 1rem;
    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: 0.875rem;
    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: 1.5rem;
    font-weight: 700;
}
.ld-aff-dash-stat-label {
    font-size: var(--ld-font-size-xs);
    opacity: 0.8;
}

/* Banner */
.ld-aff-banner {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    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: #d1fae5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ld-aff-banner-icon svg {
    width: 20px;
    height: 20px;
    color: #059669;
}

/* 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: 1rem;
    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: 0.875rem;
    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: 0.875rem;
    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: #d1fae5;
    color: #059669;
}
.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: 0.875rem;
    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: 0.875rem;
}
.ld-aff-history-amount--plus {
    color: #059669;
}
.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: 1.5rem; 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: 1.75rem; font-weight: 800; color: var(--ld-primary); margin-bottom: 0.25rem; }
.ld-preview-label { font-size: 0.75rem; 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: 1rem; 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: 2.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; margin-bottom: 0.375rem; }
.ld-dopamine-stat-label { font-size: 0.8125rem; 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: 0.9375rem; color: var(--ld-gray-700); line-height: 1.5; }
.ld-insight-loading { text-align: center; color: var(--ld-gray-500); font-size: 0.875rem; 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-an-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ld-spacing-3); margin-bottom: var(--ld-spacing-5); }
@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-row { display: flex; align-items: baseline; gap: 0.375rem; }
.ld-an-kpi-value { font-size: 1.5rem; font-weight: 700; color: var(--ld-gray-900); line-height: 1; }
.ld-an-kpi-change { font-size: 0.7rem; font-weight: 600; }
.ld-change-up { color: #10b981; }
.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-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: 1.75rem; 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: 1.1rem; }
.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: 0.95rem; }
#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: 1.5rem; margin-bottom: 0.25rem; }
.ld-progress-step .step-text { font-size: 0.75rem; 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: 0.9rem; }
@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: 0.6875rem; 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: 1.125rem; font-weight: 700; color: var(--ld-gray-900); margin: 0 0 0.375rem; }
.ld-plan-header p { font-size: 0.8125rem; 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: 2rem; font-weight: 700; color: var(--ld-gray-900); letter-spacing: -0.025em; }
.ld-price-period { font-size: 0.875rem; color: var(--ld-gray-500); margin-left: 0.125rem; }
.ld-plan-features { flex: 1; margin-bottom: 1.5rem; }
.ld-features-intro { font-size: 0.8125rem; 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: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.8125rem; color: var(--ld-gray-600); }
.ld-plan-features li svg { width: 14px; height: 14px; color: var(--ld-gray-400); flex-shrink: 0; }
.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: 0.875rem; 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%); } }

/* =====================================================
   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: 1.5rem; 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: 0.9375rem; }
.ld-upgrade-features-list svg { color: var(--ld-success, #10b981); flex-shrink: 0; }
.ld-leads-dashboard { display: flex; flex-direction: column; gap: 1.5rem; }
.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: 2rem; 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: 0.875rem; 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: 1.125rem; 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: 1.25rem; 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-lead-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1.325rem 1.625rem; background: white; border-top: 1px solid var(--ld-border); border-radius: 0; transition: background 0.12s; }
.ld-lead-item:first-child { border-top: none; }
.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: 10px; font-weight: 600; text-transform: uppercase; background: var(--ld-primary); color: white; border-radius: 4px; }
.ld-lead-badge-contacted { padding: 2px 6px; font-size: 10px; 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: 0.8125rem; 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: 0.875rem; color: var(--ld-gray-600); text-decoration: none; }
.ld-lead-contact a:hover { color: var(--ld-primary); }
.ld-lead-message { font-size: 0.9375rem; 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: 0.8125rem; 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; gap: 0.5rem; }
.ld-lead-action-btn { 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-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 { 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: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }
.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: 1.5rem; 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: 0.875rem; 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: 3rem; font-weight: 700; line-height: 1; }
.ld-reseller-credits-label { font-size: 1rem; 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: 0.875rem; 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: 1.5rem; 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: 0.875rem; 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: 1rem; 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: 0.875rem; }
.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: 1rem; font-weight: 600; margin: 0; color: var(--ld-gray-900); }
.ld-reseller-site-status { font-size: 0.75rem; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: var(--ld-radius-sm); white-space: nowrap; }
.ld-reseller-site-status--active { background: #d1fae5; color: #065f46; }
.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: #d1fae5; color: #059669; }
.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: 0.875rem; 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: 0.875rem; }
.ld-reseller-history-amount--plus { color: #059669; }
.ld-reseller-history-amount--minus { color: #dc2626; }
.ld-reseller-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ld-reseller-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.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: 1.25rem; cursor: pointer; color: var(--ld-gray-500); }
.ld-reseller-modal-close:hover { background: var(--ld-gray-200); }
.ld-reseller-modal-content h2 { font-size: 1.25rem; 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: 0.75rem; font-weight: 600; color: var(--ld-gray-500); text-transform: uppercase; letter-spacing: 0.05em; }
.ld-reseller-pack-credits { display: block; font-size: 1.25rem; font-weight: 700; color: var(--ld-gray-900); }
.ld-reseller-pack-price { font-size: 1.5rem; 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: 0.875rem; 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: 0.875rem; }
.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: #10B981; --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 { min-height: 100vh; background: var(--ld-page-bg); padding: 2rem 1rem 4rem; }
.pub-container { max-width: 800px; margin: 0 auto; }
.pub-header { text-align: center; margin-bottom: 2rem; }
.pub-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--pub-gray-900); margin: 0 0 0.5rem; }
.pub-header p { color: var(--pub-gray-500); margin: 0; }
.pub-progress { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; }
.pub-progress-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ld-gray-300); transition: all 0.3s; }
.pub-progress-dot.active { background: var(--ld-accent); transform: scale(1.25); }
.pub-progress-dot.done { background: var(--ld-gray-500); }
.pub-card { background: var(--ld-content-bg); border-radius: var(--ld-radius-lg); border: 1px solid var(--ld-border); padding: 2rem; }
.pub-step { display: none; }
.pub-step.active { display: block; }
.pub-step-title { font-size: 1.25rem; font-weight: 600; color: var(--pub-gray-900); margin: 0 0 0.5rem; }
.pub-step-desc { color: var(--pub-gray-500); font-size: 0.875rem; margin: 0 0 1.5rem; }
.pub-tabs { display: flex; margin-bottom: 1.5rem; background: var(--ld-gray-100); border: 1px solid var(--ld-border); 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; }
.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: 0.875rem; margin-bottom: 1rem; }
.pub-domain-status.checking { background: var(--pub-gray-100); color: var(--pub-gray-600); }
.pub-domain-status.available { background: #D1FAE5; color: #065F46; }
.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: 0.875rem; margin-top: 1rem; background: #FEF3C7; color: #92400E; border: 1px solid #FCD34D; }
.pub-domain-warning .warning-icon { font-size: 1.25rem; 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: 0.875rem; font-weight: 600; margin: 0 0 0.75rem; color: var(--pub-gray-800); }
.pub-dns-row { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--pub-gray-200); font-size: 0.875rem; }
.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: 0.75rem; color: var(--pub-gray-500); margin-top: 0.75rem; }
.pub-plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-bottom: 1.5rem; border: 1px solid var(--ld-border); border-radius: var(--ld-radius-lg); overflow: visible; }
.pub-plan { border: none; border-right: 1px solid var(--ld-border); padding: 1.5rem; cursor: pointer; transition: background 0.15s ease; background: var(--ld-content-bg); position: relative; }
.pub-plan:last-child { border-right: none; }
.pub-plan:hover { background: var(--ld-gray-50); }
.pub-plan.selected { background: var(--ld-gray-50); border-color: var(--ld-gray-400) !important; box-shadow: 0 0 0 3px rgba(0,0,0,0.06); z-index: 1; }
.pub-plan input { display: none; }
.pub-plan-header { display: flex; justify-content: space-between; align-items: flex-start; flex-direction: column; margin-bottom: 0.75rem; }
.pub-plan-name { font-weight: 600; color: var(--ld-gray-900); }
.pub-plan-desc { margin: 0.25rem 0 0.75rem; font-size: 0.8125rem; line-height: 1.45; color: var(--ld-gray-500); }
.pub-plan-popular-badge { position: absolute; top: -11px; right: 1rem; background: var(--ld-primary); color: #fff; font-size: 0.6875rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 4px; white-space: nowrap; }
.pub-plan-price { text-align: left; }
.pub-plan-price-amount { font-size: var(--ld-font-size-2xl); font-weight: 700; color: var(--ld-gray-900); }
.pub-plan-price-period { font-size: 0.875rem; color: var(--ld-gray-500); margin-left: 2px; }
.pub-plan-features { list-style: none; padding: 0; margin: 0.75rem 0 0; font-size: var(--ld-font-size-sm); color: var(--ld-gray-600); }
.pub-plan-features li { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; }
.pub-plan-features svg { width: 14px; height: 14px; color: var(--ld-accent); flex-shrink: 0; }
.pub-plan-selected-badge { display: none; position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--ld-gray-900); color: #fff; font-size: 0.6875rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 4px; white-space: nowrap; }
.pub-plan.selected .pub-plan-selected-badge { display: block; }
@media (max-width: 640px) { .pub-plans { grid-template-columns: 1fr; } .pub-plan { border-right: none; border-bottom: 1px solid var(--ld-border); } .pub-plan:last-child { border-bottom: none; } }
.pub-billing-toggle { display: inline-flex; justify-content: center; margin-bottom: 1.5rem; background: var(--ld-gray-100); border: 1px solid var(--ld-border); border-radius: var(--ld-radius-sm); padding: 4px; margin-left: auto; margin-right: auto; }
.pub-cycle-btn { 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-cycle-btn:hover { color: var(--ld-gray-800); }
.pub-cycle-btn.active { background: #fff; color: var(--ld-gray-900); font-weight: 500; }
.pub-cycle-btn .badge { background: var(--ld-accent); color: white; font-size: 0.625rem; 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: var(--ld-gray-100); color: var(--ld-gray-700); border: 1px solid var(--ld-border); }
.pub-btn-secondary:hover:not(:disabled) { background: var(--ld-gray-200); }
.pub-btn-test { background: var(--ld-gray-800); color: white; }
.pub-btn-test:hover:not(:disabled) { background: var(--ld-gray-900); }
.pub-actions { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.pub-actions-right { display: flex; gap: 0.75rem; }
.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: 0.75rem; 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: #F0FDF4; border-color: #BBF7D0; }
.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: #16A34A; 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: #16A34A; 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; }
.pub-celebration-icon { width: 80px; height: 80px; background: linear-gradient(135deg, var(--pub-success) 0%, #059669 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.5rem; color: white; }
.pub-celebration h2 { font-size: 1.5rem; font-weight: 700; color: var(--pub-gray-900); margin: 0 0 0.5rem; }
.pub-celebration p { color: var(--pub-gray-500); margin: 0 0 1.5rem; }
.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: 0.9375rem; 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: 0.875rem; margin: 0 0 0.5rem; }
.pub-error-box p { color: #7F1D1D; font-size: 0.8125rem; margin: 0; }
@keyframes pubSpin { to { transform: rotate(360deg); } }
.pub-spin { animation: pubSpin 1s linear infinite; }
@media (max-width: 640px) { .pub-card { padding: 1.5rem; } .pub-domain-input-wrap { flex-direction: column; } .pub-actions { flex-direction: column; } .pub-actions-right { flex-direction: column; } }

/* =====================================================
   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: 4rem; margin-bottom: 1rem; }
.ld-limit-card h1 { font-size: 1.75rem; 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: 1.125rem; margin: 0; }
.ld-upgrade-price { font-weight: 700; color: #6366F1; }
.ld-upgrade-option p { color: #6b7280; font-size: 0.875rem; 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: 0.9rem; }
.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: 0.8125rem; 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: 0.8125rem; 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: 0.875rem; 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: 0.8125rem; }
.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: 1.5rem; font-weight: 700; color: var(--ld-gray-900); margin: 0 0 0.5rem; }
.ld-showcase-subtitle { font-size: 1rem; 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: 0.9rem; 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: 0.8125rem; 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: 0.8125rem; 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: 1.125rem; 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: 0.875rem; color: var(--ld-gray-500); }
@media (max-width: 768px) { .ld-style-selector { gap: 0.5rem; } .ld-style-pill { padding: 0.5rem 1rem; font-size: 0.8rem; } .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(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 9999; 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: 3rem; margin-bottom: 1rem; }
.ld-draft-modal-content h2 { font-size: 1.5rem; 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: 1rem; 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: 0.95rem; }
.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: 0.95rem; color: #4b5563; }
.select2-container--default .select2-results__option[aria-disabled=true] { padding: 10px 14px 6px; font-weight: 600; color: #374151; font-size: 0.85rem; 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: 0.875rem; 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: 1rem; }
.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: #10B981; }
.ob-body { flex: 1; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.ob-step { max-width: 520px; width: 100%; animation: obFadeIn 0.3s ease; }
.ob-step[style*="display: none"] { animation: none; }
.ob-step--wide { max-width: 900px; }
@keyframes obFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.ob-title { font-size: 1.75rem; font-weight: 700; color: #171717; margin-bottom: 0.5rem; letter-spacing: -0.025em; }
.ob-subtitle { font-size: 0.9375rem; color: #666; margin-bottom: 2rem; line-height: 1.5; }
.ob-label { display: block; font-size: 0.8125rem; font-weight: 500; color: #666; margin-bottom: 0.5rem; }
.ob-input { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; 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: 0.75rem; color: #999; margin-top: 0.375rem; }
.ob-textarea { width: 100%; padding: 0.875rem 1rem; font-size: 1rem; 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: 0.75rem; 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: 0.9375rem; 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: 9999; 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: 0.875rem; 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-maps-search-skeleton { margin-top: 0; }
.ob-maps-search-skeleton .ob-maps-skeleton-caption { font-size: 0.9375rem; 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: 1rem; color: #171717; margin-bottom: 0.25rem; }
.ob-maps-addr { font-size: 0.8125rem; color: #666; margin-bottom: 0.5rem; }
.ob-maps-meta { display: flex; gap: 1rem; font-size: 0.8125rem; color: #999; }
.ob-maps-actions { display: flex; gap: 0.5rem; margin-top: 1rem; }
.ob-maps-confirm { flex: 1; padding: 0.625rem; background: #171717; color: white; border: none; border-radius: 8px; font-weight: 600; font-size: 0.875rem; cursor: pointer; font-family: inherit; }
.ob-maps-confirm:hover { background: #333; }
.ob-maps-deny { padding: 0.625rem 1rem; background: transparent; color: #999; border: 1px solid var(--ld-border); border-radius: 8px; font-size: 0.8125rem; 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: 0.6875rem; 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: 0.8125rem; 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: 0.8125rem; 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: 0.6875rem; 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-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: 0.9375rem; font-weight: 600; color: #171717; margin: 0 0 0.125rem; }
.ob-objective-text p { font-size: 0.8125rem; 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: 0.75rem; 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: 0.875rem; 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-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); }
.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: 0.875rem; color: #666; margin: 0; }
.ob-logo-upload span { font-size: 0.75rem; 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: 0.75rem; 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: 0.8125rem; 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: 0.9375rem; font-weight: 600; color: #171717; margin: 0; }
.ob-logo-choice p { font-size: 0.8125rem; 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: 0.8125rem; color: #888; }
.ob-confirm-value { font-size: 0.9375rem; 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: 0.8125rem; 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: 0.9375rem; 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; }
.ob-gen { text-align: center; padding: 2.5rem 2rem; max-width: 520px; width: 100%; display: flex; flex-direction: column; align-items: center; }
.ob-gen-spinner { width: 48px; height: 48px; border: 3px solid #E5E7EB; border-top-color: var(--ld-primary, #6366F1); border-radius: 50%; animation: spin 0.8s linear infinite; margin-bottom: 1.5rem; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.ob-gen-title { font-size: 1.375rem; font-weight: 700; color: #171717; margin-bottom: 0.375rem; }
.ob-gen-status { font-size: 0.9375rem; color: #666; margin-bottom: 0.75rem; }
.ob-gen-bar { width: 100%; max-width: 320px; height: 6px; background: #E5E7EB; border-radius: 3px; overflow: hidden; margin-bottom: 0.25rem; }
.ob-gen-bar-fill { height: 100%; background: var(--ld-primary, #6366F1); border-radius: 3px; transition: width 0.3s ease; width: 0%; }
.ob-gen-pct { font-size: 0.75rem; color: #9CA3AF; margin-bottom: 1.5rem; }
.ob-gen-steps { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; max-width: 340px; margin: 0 auto; text-align: left; }
.ob-gen-step { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-radius: var(--ld-radius-md, 8px); background: #F9FAFB; border: 1px solid var(--ld-border, #EAEAEA); transition: all 0.3s; position: relative; }
.ob-gen-step.active { background: #EEF2FF; border-color: #C7D2FE; }
.ob-gen-step.done { background: #F0FDF4; border-color: #BBF7D0; }
.ob-gen-step-icon { width: 28px; height: 28px; border-radius: 50%; background: #E5E7EB; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s; }
.ob-gen-step-icon svg { width: 14px; height: 14px; color: #9CA3AF; }
.ob-gen-step.active .ob-gen-step-icon { background: var(--ld-primary, #6366F1); animation: obStepPulse 1.5s ease-in-out infinite; }
.ob-gen-step.active .ob-gen-step-icon svg { color: white; }
.ob-gen-step.done .ob-gen-step-icon { background: #16A34A; }
.ob-gen-step.done .ob-gen-step-icon svg { color: white; }
.ob-gen-step-label { font-size: 0.875rem; color: #6B7280; flex: 1; transition: all 0.3s; }
.ob-gen-step.active .ob-gen-step-label { color: var(--ld-primary, #6366F1); font-weight: 500; }
.ob-gen-step.done .ob-gen-step-label { color: #15803D; font-weight: 500; }
.ob-gen-step-check { width: 20px; height: 20px; border-radius: 50%; background: #16A34A; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: 0; transform: scale(0.5); transition: all 0.3s ease; }
.ob-gen-step.done .ob-gen-step-check { opacity: 1; transform: scale(1); }
@keyframes obStepPulse { 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); } }
.ob-showcase { max-width: 900px; 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: 0.8125rem; 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: 0.625rem; 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: 0.75rem; 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: #22C55E; flex-shrink: 0; }
.ob-viewport { position: relative; height: 420px; 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: 0.8125rem; 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: 1rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: background 0.15s; }
.ob-btn-use:hover { background: #333; }
.ob-cta-hint { font-size: 0.75rem; 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: 1.125rem; font-weight: 600; color: #171717; margin-bottom: 0.375rem; }
.ob-error p { font-size: 0.875rem; 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: linear-gradient(135deg, #22C55E, #16A34A); 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: 0.875rem; 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; } }
@media (max-width: 640px) { .ob-title { font-size: 1.375rem; } .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-gen-steps { gap: 1rem; } .ob-showcase-pills { flex-wrap: wrap; } }

/* =====================================================
   PAGE: IA CONTENT
   ===================================================== */
.ld-input { display: block; width: 100%; padding: 0.5rem 0.75rem; font-size: 0.9375rem; 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: 1.5rem; 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; }
.seo-wizard-step.active { display: block; }
.seo-wizard-title { font-size: 1.25rem; font-weight: 600; color: var(--ld-gray-900); margin: 0 0 0.5rem; }
.seo-wizard-desc { font-size: 0.875rem; 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: 0.9375rem; font-weight: 600; color: #171717; margin: 0 0 0.125rem; }
.seo-option-text p { font-size: 0.8125rem; color: #888; 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: 0.9375rem; 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: 1.25rem; 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: 0.9375rem; color: var(--ld-gray-500); }
.seo-wizard-checklist li.done { color: var(--ld-gray-700); }
.seo-wizard-checklist li.done .seo-check-icon { color: #10b981; }
@media (max-width: 640px) { .seo-wizard-card { padding: 1.5rem; } .seo-wizard-title { font-size: 1.25rem; } .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: 1.5rem; 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: 0.9375rem; }
.ld-seo-features-list svg { color: var(--ld-primary); flex-shrink: 0; }
.ld-btn-lg { padding: 0.875rem 1.5rem; font-size: 1rem; }
.ld-seo-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; 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: 1.125rem; 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: 0.875rem; }
.ld-seo-analyzing-steps li.completed { color: var(--ld-gray-900); }
.ld-seo-analyzing-steps li.completed .step-icon { color: #10b981; }
.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: 1rem; 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: 1rem 1.25rem; 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: 0.8125rem; font-weight: 500; color: var(--ld-gray-700); margin-bottom: 0.375rem; }
.ld-seo-dashboard { display: flex; flex-direction: column; gap: 1.5rem; }
.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: 1.5rem; font-weight: 700; color: var(--ld-gray-900); }
.ld-seo-stat-label { font-size: 0.75rem; 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: 10px; 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: #d1fae5; color: #065f46; }
.ld-seo-status-paused { background: #fef3c7; color: #92400e; }
.ld-seo-post-main { flex: 1; min-width: 0; }
.ld-seo-post-title { font-size: 0.9375rem; 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: 0.8125rem; 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-action-resume { color: #059669; }
.ld-seo-action-resume:hover { color: #047857; background: #d1fae5; }
.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-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: 1rem; 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: 0.9375rem; 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: 0.6875rem; 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: 0.8125rem; 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: #10b981 !important; }
.ld-seo-calendar-day-published { font-weight: 600; color: #10b981; }
.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: 0.75rem; color: var(--ld-gray-500); }
.ld-seo-legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.ld-seo-legend-published { background: #10b981; }
.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; }
.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: 1.5rem; }
.ld-seo-view-content h2 { font-size: 1.25rem; }
.ld-seo-view-content h3 { font-size: 1.125rem; }
.ld-seo-view-content h4 { font-size: 1rem; }
.ld-seo-view-content p { margin-bottom: 1rem; }
.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; }
.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: 11px; font-weight: 600; background: var(--ld-sidebar-active-bg); border-radius: 4px; margin-left: 4px; color: var(--ld-gray-700); line-height: 1; vertical-align: middle; }
.ld-pagination-sentinel { height: 1px; margin: 0; }

/* =====================================================
   EDITOR: PARTIALS — IA MODAL + SKELETON
   ===================================================== */
.ld-ai-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 9999; 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; }
.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-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:var(--ld-gray-900); color:white; border:none; border-radius:var(--ld-radius-sm); font-size:0.8125rem; font-weight:500; cursor:pointer; transition:background .15s; }
.ss-add-btn:hover { background:var(--ld-gray-800); }
.ss-add-btn--secondary { background:white; color:var(--ld-gray-700); 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-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: 200;
    }
    .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;
    }
    .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-universal-header ~ .ld-content {
        margin-top: 52px;
        padding: 16px;
    }

    /* Header: full-width, no sidebar offset */
    .ld-editor-header {
        left: 0;
        padding: 0 0.75rem;
        gap: 0.5rem;
    }
    .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.625rem 0.75rem;
        gap: 0.5rem;
        z-index: 50;
        display: flex;
    }
    .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-preview-btn .ld-action-label {
        display: inline;
    }
    .ld-editor-header:not(.ld-universal-header) .ld-editor-action-btn.ld-save-btn {
        flex: 2;
    }
    .ld-editor-header:not(.ld-universal-header) .ld-editor-more-btn {
        flex: 0 !important;
    }
    .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: 5rem;
    }

    /* 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;
    }
    .ld-universal-header ~ .ld-content {
        margin-top: 52px;
    }

    /* Prevent inline grids from overflowing on small screens */
    .ld-content [style*="grid-template-columns"] {
        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-content [style*="grid-template-columns"] {
        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 5rem;
    }
}




.ppage-template-page-ia-content .ld-help-filtersld-tab-container,
.page-template-page-leads .ld-help-filtersld-tab-container {
    margin-bottom: .75rem !important;
}

.page-template-page-ia-content .ld-help-search-wrap,
.page-template-page-leads .ld-help-search-wrap {
    margin-bottom: 0 !important;
}