/* =============================================================
   yuplan - Minimal Flat Redesign
   Estetica: Apple/Notion (sin sombras pesadas, bordes finos,
   mucho espacio en blanco, un solo acento por paleta).
   5 paletas conmutables en tiempo real: mono / ocean / violet / emerald / coral
   ============================================================= */

/* ----------------------------------------------------------------
   1. TOKENS ESTRUCTURALES (independientes de la paleta)
   ---------------------------------------------------------------- */
:root {
    --pp-radius-sm: 10px;
    --pp-radius: 14px;
    --pp-radius-lg: 20px;
    --pp-radius-xl: 28px;

    /* Neutral (dark) by default. Overridden by .light-theme */
    --pp-bg-body: #0B0B0F;
    --pp-bg-card: #15151B;
    --pp-bg-card-2: #1B1B22;
    --pp-bg-input: #202029;
    --pp-bg-chip: #1B1B22;
    --pp-bg-type-card: #1B1B22;
    --pp-bg-type-card-hover: #22222A;
    --pp-bg-modal: #15151B;
    --pp-bg-modal-header: #1B1B22;
    --pp-bg-suggestion: #15151B;
    --pp-bg-glass-inner: #1B1B22;
    --pp-bg-btn-secondary: #1B1B22;
    --pp-bg-icon-btn: transparent;
    --pp-bg-user-menu: #15151B;
    --pp-bg-option-card: #1B1B22;
    --pp-bg-option-card-selected: var(--pp-tint);
    --pp-bg-info-box: #1B1B22;

    --pp-border: #2A2A33;
    --pp-border-strong: #383843;
    --pp-border-glass: #2A2A33;
    --pp-border-input: #2A2A33;
    --pp-border-chip: #2A2A33;
    --pp-border-type-card: #2A2A33;
    --pp-border-btn-secondary: #2A2A33;
    --pp-border-modal: #2A2A33;

    --pp-text-body: #B4B4BE;
    --pp-text-primary: #F4F4F6;
    --pp-text-secondary: #90909A;
    --pp-text-muted: #6A6A74;
    --pp-text-label: #8A8A94;
    --pp-text-placeholder: #5A5A64;

    /* Shadows: minimalissimo. Casi nada. */
    --pp-shadow: none;
    --pp-shadow-sm: none;
    --pp-shadow-ring: 0 0 0 1px var(--pp-border);

    --pp-tint: rgba(255, 255, 255, 0.04);

    --pp-body-fade: #0B0B0F;
    --pp-mesh-1: rgba(var(--pp-primary-rgb), 0.32);
    --pp-mesh-2: rgba(var(--pp-secondary-rgb), 0.26);
    --pp-mesh-3: rgba(var(--pp-accent-rgb), 0.22);
}

/* ----------------------------------------------------------------
   2. LIGHT THEME OVERRIDES (neutrales)
   ---------------------------------------------------------------- */
.light-theme {
    /* Canvas con tinte de paleta mas vivo (mas colorido) */
    --pp-bg-body: linear-gradient(135deg, rgba(var(--pp-primary-rgb), 0.20) 0%, #F0F0F3 45%, rgba(var(--pp-secondary-rgb), 0.18) 100%);
    /* Tarjetas blancas: destacan sobre el canvas colorido */
    --pp-bg-card: #FFFFFF;
    --pp-bg-card-2: rgba(var(--pp-primary-rgb), 0.05);
    --pp-bg-input: #FFFFFF;
    --pp-bg-chip: rgba(var(--pp-primary-rgb), 0.05);
    --pp-bg-type-card: #FFFFFF;
    --pp-bg-type-card-hover: rgba(var(--pp-primary-rgb), 0.06);
    --pp-bg-modal: #FFFFFF;
    --pp-bg-modal-header: rgba(var(--pp-primary-rgb), 0.04);
    --pp-bg-suggestion: #FFFFFF;
    --pp-bg-glass-inner: rgba(var(--pp-primary-rgb), 0.06);
    --pp-bg-btn-secondary: #FFFFFF;
    --pp-bg-icon-btn: transparent;
    --pp-bg-user-menu: #FFFFFF;
    --pp-bg-option-card: #FFFFFF;
    --pp-bg-info-box: rgba(var(--pp-primary-rgb), 0.06);

    --pp-border: #E4E4E7;
    --pp-border-strong: #D4D4D8;
    --pp-border-glass: #E4E4E7;
    --pp-border-input: #DCDCE0;
    --pp-border-chip: #E4E4E7;
    --pp-border-type-card: #E4E4E7;
    --pp-border-btn-secondary: #E4E4E7;
    --pp-border-modal: #E4E4E7;

    --pp-text-body: #3F3F46;
    --pp-text-primary: #09090B;
    --pp-text-secondary: #52525B;
    --pp-text-muted: #7C7C85;
    --pp-text-label: #6A6A73;
    --pp-text-placeholder: #9B9BA3;

    /* Sombras muy sutiles para dar profundidad (cards elevadas sobre el canvas) */
    --pp-shadow: 0 1px 2px rgba(15, 17, 26, 0.04), 0 2px 8px rgba(15, 17, 26, 0.035);
    --pp-shadow-sm: 0 1px 2px rgba(15, 17, 26, 0.05);

    --pp-tint: rgba(var(--pp-primary-rgb), 0.07);

    --pp-body-fade: #F0F0F3;
    --pp-mesh-1: rgba(var(--pp-primary-rgb), 0.72);
    --pp-mesh-2: rgba(var(--pp-secondary-rgb), 0.62);
    --pp-mesh-3: rgba(var(--pp-accent-rgb), 0.52);
}

/* ----------------------------------------------------------------
   3. PALETAS (acento). Independientes de light/dark.
   Cada una define: primary (+rgb), secondary, accent, gradientes, tint.
   El color "custom" se inyecta por JS (share.js) como variables inline.
   ---------------------------------------------------------------- */

/* --- OCEAN (default): azul / cyan --- */
.palette-ocean {
    --pp-primary: #0EA5E9;
    --pp-primary-rgb: 14, 165, 233;
    --pp-primary-dark: #0369A1;
    --pp-secondary: #06B6D4;
    --pp-secondary-rgb: 6, 182, 212;
    --pp-accent: #F59E0B;
    --pp-accent-rgb: 245, 158, 11;
    --pp-grad: linear-gradient(135deg, #0EA5E9 0%, #0369A1 100%);
    --pp-grad-soft: linear-gradient(135deg, rgba(14,165,233,0.10), rgba(6,182,212,0.04));
    --pp-accent-tint: rgba(14, 165, 233, 0.08);
    --pp-accent-tint-border: rgba(14, 165, 233, 0.18);
}

/* --- VIOLET: violeta -> magenta --- */
.palette-violet {
    --pp-primary: #7C3AED;
    --pp-primary-rgb: 124, 58, 237;
    --pp-primary-dark: #6D28D9;
    --pp-secondary: #EC4899;
    --pp-secondary-rgb: 236, 72, 153;
    --pp-accent: #F59E0B;
    --pp-accent-rgb: 245, 158, 11;
    --pp-grad: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
    --pp-grad-soft: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(236,72,153,0.04));
    --pp-accent-tint: rgba(124, 58, 237, 0.08);
    --pp-accent-tint-border: rgba(124, 58, 237, 0.18);
}

/* --- EMERALD: esmeralda -> lima --- */
.palette-emerald {
    --pp-primary: #10B981;
    --pp-primary-rgb: 16, 185, 129;
    --pp-primary-dark: #059669;
    --pp-secondary: #84CC16;
    --pp-secondary-rgb: 132, 204, 22;
    --pp-accent: #F59E0B;
    --pp-accent-rgb: 245, 158, 11;
    --pp-grad: linear-gradient(135deg, #10B981 0%, #84CC16 100%);
    --pp-grad-soft: linear-gradient(135deg, rgba(16,185,129,0.10), rgba(132,204,22,0.04));
    --pp-accent-tint: rgba(16, 185, 129, 0.08);
    --pp-accent-tint-border: rgba(16, 185, 129, 0.18);
    --pp-on-accent: #06281F;
}

/* --- CORAL: naranja -> rosa coral --- */
.palette-coral {
    --pp-primary: #FB923C;
    --pp-primary-rgb: 251, 146, 60;
    --pp-primary-dark: #EA580C;
    --pp-secondary: #F43F5E;
    --pp-secondary-rgb: 244, 63, 94;
    --pp-accent: #FACC15;
    --pp-accent-rgb: 250, 204, 21;
    --pp-grad: linear-gradient(135deg, #FB923C 0%, #F43F5E 100%);
    --pp-grad-soft: linear-gradient(135deg, rgba(251,146,60,0.10), rgba(244,63,94,0.04));
    --pp-accent-tint: rgba(251, 146, 60, 0.08);
    --pp-accent-tint-border: rgba(251, 146, 60, 0.20);
    --pp-on-accent: #2A1206;
}

/* Colores funcionales fijos (funcionan en todas las paletas) */
:root {
    --pp-success: #10B981;
    --pp-success-rgb: 16, 185, 129;
    --pp-warn: #F59E0B;
    --pp-warn-rgb: 245, 158, 11;
    --pp-danger: #EF4444;
    --pp-danger-rgb: 239, 68, 68;
    --pp-fav: #F43F5E;
    /* Color del texto/iconos sobre fondos de acento (blanco por defecto).
       Las paletas claras (coral/emerald) y el color custom lo sobreescriben. */
    --pp-on-accent: #ffffff;
}

/* ----------------------------------------------------------------
   4. BASE
   ---------------------------------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
}

body {
    background: var(--pp-bg-body);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--pp-text-body);
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-feature-settings: 'cv02', 'cv03', 'cv11', 'ss01';
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    transition: background 0.4s ease, color 0.3s ease;
    letter-spacing: -0.01em;
}

/* Mesh de fondo: degradado aurora animado, coloreado por la paleta activa.
   Tres blobs (primary, secondary, accent) con blur + animacion suave. */
.mesh-bg {
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    overflow: hidden;
    transition: background 0.5s ease;
}

.mesh-bg::before,
.mesh-bg::after {
    content: "";
    position: fixed;
    border-radius: 50%;
    filter: blur(80px);
    z-index: -2;
    will-change: transform;
}

/* Blob 1: primary (arriba-izquierda) */
.mesh-bg::before {
    width: 520px;
    height: 520px;
    top: -12%;
    left: 4%;
    background: radial-gradient(circle, var(--pp-mesh-1), transparent 70%);
    animation: pp-aurora 22s ease-in-out infinite;
}

/* Blob 2: secondary (derecha) */
.mesh-bg::after {
    width: 460px;
    height: 460px;
    top: 28%;
    right: -2%;
    background: radial-gradient(circle, var(--pp-mesh-2), transparent 70%);
    animation: pp-aurora 28s ease-in-out infinite reverse;
}

/* Blob 3: accent (abajo-centro) */
.mesh-bg-3 {
    position: fixed;
    bottom: -18%;
    left: 28%;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--pp-mesh-3), transparent 70%);
    filter: blur(90px);
    z-index: -2;
    animation: pp-float 16s ease-in-out infinite;
    pointer-events: none;
}

@keyframes pp-aurora {
    0%, 100% { transform: translate(0, 0) rotate(0deg) scale(1); }
    33%      { transform: translate(40px, -30px) rotate(120deg) scale(1.1); }
    66%      { transform: translate(-30px, 20px) rotate(240deg) scale(0.95); }
}

@keyframes pp-float {
    0%, 100% { transform: translateY(0) translateX(0); }
    50%      { transform: translateY(-30px) translateX(15px); }
}

@media (prefers-reduced-motion: reduce) {
    .mesh-bg::before,
    .mesh-bg::after,
    .mesh-bg-3 { animation: none; }
}

/* ----------------------------------------------------------------
   5. TIPOGRAFIA / HELPERS DE TEXTO
   ---------------------------------------------------------------- */
.pp-gradient-text {
    background: var(--pp-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--pp-primary);
}

.pp-accent-text { color: var(--pp-primary) !important; }

/* Etiqueta de formulario compacta (portal empresas) */
.lbl {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.375rem;
    color: var(--pp-text-label);
}

/* Footer */
.pp-footer-link {
    display: inline-flex;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--pp-text-secondary);
    text-decoration: none;
    transition: color .15s ease;
}
.pp-footer-link:hover { color: var(--pp-primary); }

.pp-footer-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 0.9rem;
    color: var(--pp-text-secondary);
    background: var(--pp-tint);
    border: 1px solid var(--pp-border);
    transition: all .15s ease;
}
.pp-footer-icon:hover {
    color: var(--pp-primary);
    border-color: var(--pp-accent-tint-border);
    transform: translateY(-1px);
}

/* Hover theme-aware para filas/items de menu */
.pp-row-hover { transition: background .15s ease; }
.pp-row-hover:hover { background: var(--pp-tint); }

/* ----------------------------------------------------------------
   6. CARDS (planas, borde fino, sin sombra)
   ---------------------------------------------------------------- */
.pp-card {
    position: relative;
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-lg);
    box-shadow: var(--pp-shadow);
    padding: 1.5rem;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.pp-card--location {
    padding: 1.25rem 1rem;
}

@media (min-width: 640px) {
    .pp-card--location { padding: 1.75rem; }
    .pp-card { padding: 1.5rem; }
}

/* Contenedor de resultados transparente: sin fondo/borde/sombra.
   Solo las tarjetas internas (planes) tienen color, asi destacan
   sobre el canvas y se evita el efecto "tarjeta blanca sobre blanca". */
.pp-results {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

.glass-panel {
    background: var(--pp-bg-card);
    border: 1px solid var(--pp-border);
}

/* ----------------------------------------------------------------
   7. INPUTS
   ---------------------------------------------------------------- */
.pp-input,
.glass-input {
    background: var(--pp-bg-input);
    border: 1px solid var(--pp-border-input);
    border-radius: var(--pp-radius-sm);
    color: var(--pp-text-primary);
    font-weight: 450;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, color 0.3s ease;
}

.pp-input::placeholder {
    color: var(--pp-text-placeholder);
    font-weight: 400;
}

.pp-input:focus,
.glass-input:focus {
    border-color: var(--pp-primary);
    box-shadow: 0 0 0 3px rgba(var(--pp-primary-rgb), 0.14);
}

.pp-input:hover:not(:focus),
.glass-input:hover:not(:focus) {
    border-color: var(--pp-border-strong);
}

/* ----------------------------------------------------------------
   8. AUTOCOMPLETE SUGGESTIONS
   ---------------------------------------------------------------- */
.pp-suggestions {
    background: var(--pp-bg-suggestion);
    border: 1px solid var(--pp-border);
    max-height: 360px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--pp-border-strong) transparent;
}

.pp-suggestions::-webkit-scrollbar { width: 6px; }
.pp-suggestions::-webkit-scrollbar-thumb {
    background: var(--pp-border-strong);
    border-radius: 3px;
}

.pp-suggestion-active {
    background: var(--pp-accent-tint) !important;
}

/* ----------------------------------------------------------------
   9. TYPE CARDS (planas: selected = acento solido)
   ---------------------------------------------------------------- */
.pp-type-card {
    position: relative;
    background: var(--pp-bg-type-card);
    border: 1px solid var(--pp-border-type-card);
    border-radius: var(--pp-radius);
    padding: 1rem 0.5rem;
    min-height: 96px;
    transition: all .25s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: none;
    overflow: hidden;
}

.pp-type-card:hover {
    border-color: var(--pp-border-strong);
    background: var(--pp-bg-type-card-hover);
    transform: translateY(-1px);
}

.pp-type-card--selected {
    color: #fff !important;
    border-color: transparent !important;
    background: var(--pp-primary) !important;
    box-shadow: none;
    transform: translateY(-1px);
}

/* ----------------------------------------------------------------
   10. CHIPS
   ---------------------------------------------------------------- */
.pp-chip > div {
    background: var(--pp-bg-chip);
    border: 1px solid var(--pp-border-chip);
    border-radius: var(--pp-radius-sm);
    padding: 0.7rem 0.4rem;
    color: var(--pp-text-secondary);
    transition: all .2s cubic-bezier(0.22, 1, 0.36, 1);
}

.pp-chip:hover > div {
    border-color: var(--pp-border-strong);
    color: var(--pp-text-primary);
}

.pp-chip > div.is-active {
    background: var(--pp-primary);
    border-color: transparent;
    color: #fff;
    box-shadow: none;
}

/* ----------------------------------------------------------------
   11. CTA (boton primario - solido, sin sombra pesada)
   ---------------------------------------------------------------- */
.pp-cta {
    position: relative;
    background: var(--pp-primary);
    color: var(--pp-on-accent);
    font-weight: 600;
    padding: 0.95rem 1.5rem;
    border: none;
    border-radius: var(--pp-radius-sm);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    cursor: pointer;
    overflow: hidden;
    transition: transform .18s cubic-bezier(0.22, 1, 0.36, 1), background .2s ease, opacity .2s ease;
    isolation: isolate;
    letter-spacing: -0.01em;
}

.pp-cta:hover:not(:disabled) {
    transform: translateY(-1px);
    background: var(--pp-primary-dark);
}

.pp-cta:active:not(:disabled) {
    transform: translateY(0) scale(0.99);
}

.pp-cta::after {
    content: "";
    position: absolute;
    top: 0; left: -120%;
    width: 80%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
    transition: left .7s ease;
    z-index: -1;
}

.pp-cta:hover:not(:disabled)::after { left: 120%; }

/* ----------------------------------------------------------------
   12. SECONDARY / ICON BUTTON (planos)
   ---------------------------------------------------------------- */
.pp-btn-secondary {
    position: relative;
    background: var(--pp-bg-btn-secondary);
    color: var(--pp-text-primary);
    font-weight: 550;
    padding: 0.6rem 1.1rem;
    border: 1px solid var(--pp-border-btn-secondary);
    border-radius: var(--pp-radius-sm);
    cursor: pointer;
    transition: all .2s ease;
}

.pp-btn-secondary:hover {
    border-color: var(--pp-border-strong);
    background: var(--pp-bg-type-card-hover);
}

.pp-icon-btn {
    background: var(--pp-bg-icon-btn);
    border: 1px solid var(--pp-border);
    transition: all .2s ease;
}

.pp-icon-btn:hover {
    border-color: var(--pp-border-strong);
    background: var(--pp-accent-tint);
}

/* ----------------------------------------------------------------
   13. MODAL
   ---------------------------------------------------------------- */
.pp-modal {
    background: var(--pp-bg-modal);
    border: 1px solid var(--pp-border-modal);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.pp-modal-header {
    background: var(--pp-bg-modal-header);
    border-bottom: 1px solid var(--pp-border);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.pp-glass-inner,
.pp-card-inner {
    background: var(--pp-bg-glass-inner);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
}

.pp-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.7rem;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--pp-bg-glass-inner);
    border: 1px solid var(--pp-border);
    color: var(--pp-text-secondary);
}

.pp-info-box {
    background: var(--pp-bg-info-box);
    border: 1px solid var(--pp-border);
    border-radius: var(--pp-radius-sm);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.pp-dropdown {
    background: var(--pp-bg-suggestion);
    border: 1px solid var(--pp-border);
    transition: background 0.3s ease, border-color 0.3s ease;
}

/* ----------------------------------------------------------------
   14. FORM COLLAPSE
   ---------------------------------------------------------------- */
.form-collapsed .form-content {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
    overflow: hidden;
}

.form-header-btn { display: none; }
.form-collapsed .form-header-btn { display: flex; }

.form-content {
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: 2800px;
    opacity: 1;
}

/* ----------------------------------------------------------------
   15. HELPERS DE COLOR PALETTE-AWARE
   (reemplazan a los Tailwind from-sky-500 hardcoded)
   ---------------------------------------------------------------- */
.pp-grad-bg { background: var(--pp-grad) !important; }
.pp-accent-bg { background: var(--pp-primary) !important; }
.pp-accent-bg-soft { background: var(--pp-accent-tint) !important; }
.pp-accent-border { border-color: var(--pp-accent-tint-border) !important; }
.pp-on-accent { color: var(--pp-on-accent); }

/* ----------------------------------------------------------------
   16. TIMELINE
   ---------------------------------------------------------------- */
.pp-timeline { position: relative; }
.pp-timeline-step { position: relative; }
.pp-timeline-node-wrap { width: 48px; }
.pp-timeline-node { transition: all .3s cubic-bezier(0.22, 1, 0.36, 1); }
.pp-timeline-line { min-height: 1.5rem; }

.pp-timeline-node.is-active-glow {
    box-shadow: 0 0 0 3px rgba(var(--pp-primary-rgb), 0.18);
}

.pp-option-card {
    transition: transform .3s cubic-bezier(0.22, 1, 0.36, 1), border-color .2s ease, background .2s ease;
}

.pp-option-card:hover:not(:disabled) {
    transform: translateY(-2px);
    border-color: var(--pp-border-strong) !important;
}

.pp-option-card:active {
    transform: translateY(-1px) scale(0.99);
}

@media (max-width: 640px) {
    .pp-timeline { padding-left: 52px !important; }
    .pp-timeline-node-wrap { left: -52px !important; width: 40px; }
    .pp-timeline-node { width: 40px !important; height: 40px !important; font-size: 1.25rem; }

    /* Compacto mobile */
    .pp-input, .glass-input { padding: 0.7rem 0.75rem; font-size: 15px; }
    .pp-cta { padding: 0.75rem 1.1rem; font-size: 0.9rem; }
    .pp-card-inner { padding: 0.7rem 0.85rem; }
    .pp-modal { border-radius: var(--pp-radius-lg); }
    .pp-modal .rounded-2xl { border-radius: var(--pp-radius-lg); }

    /* Mejores touch targets */
    button, .pp-chip > div, .pp-type-card, a { min-height: 42px; }
    .pp-footer-link, .pp-tag { min-height: 36px; }
}

/* ----------------------------------------------------------------
   17. CAROUSEL FADES
   ---------------------------------------------------------------- */
.pp-carousel { position: relative; }

.pp-carousel::before,
.pp-carousel::after {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0; bottom: 0;
    width: 36px;
    z-index: 2;
}

.pp-carousel::before {
    left: 0;
    background: linear-gradient(to right, var(--pp-body-fade), transparent);
}

.pp-carousel::after {
    right: 0;
    background: linear-gradient(to left, var(--pp-body-fade), transparent);
}

/* ----------------------------------------------------------------
   18. SCROLLBAR
   ---------------------------------------------------------------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--pp-border-strong);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--pp-text-muted); background-clip: padding-box; }

.scrollbar-hide { -ms-overflow-style: none; scrollbar-width: none; }
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* ----------------------------------------------------------------
   19. MISC
   ---------------------------------------------------------------- */
button {
    transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.heart-pop { animation: pop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275); }

.ad-placeholder {
    background: var(--pp-accent-tint);
    border: 1px dashed var(--pp-border-strong);
    color: var(--pp-text-muted);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ----------------------------------------------------------------
   20. PALETTE PICKER (selector de paleta en el header)
   ---------------------------------------------------------------- */
.pp-palette-picker {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 7px;
    background: var(--pp-bg-icon-btn);
    border: 1px solid var(--pp-border);
    border-radius: 999px;
}

.pp-palette-swatch {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease;
    position: relative;
}

.pp-palette-swatch:hover { transform: scale(1.18); }

.pp-palette-swatch.is-active {
    border-color: var(--pp-text-primary);
    transform: scale(1.1);
}

.pp-palette-swatch[data-palette="ocean"]   { background: linear-gradient(135deg, #0EA5E9, #0369A1); }
.pp-palette-swatch[data-palette="violet"]  { background: linear-gradient(135deg, #7C3AED, #EC4899); }
.pp-palette-swatch[data-palette="emerald"] { background: linear-gradient(135deg, #10B981, #84CC16); }
.pp-palette-swatch[data-palette="coral"]   { background: linear-gradient(135deg, #FB923C, #F43F5E); }

/* ----------------------------------------------------------------
   21. THEME TOGGLE (refrescado, minimal)
   ---------------------------------------------------------------- */
.pp-theme-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 999px;
    cursor: pointer;
    border: 1px solid var(--pp-border);
    background: var(--pp-bg-icon-btn);
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pp-theme-toggle:hover { border-color: var(--pp-border-strong); }

.pp-theme-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--pp-primary);
    transition: all 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
}

.light-theme .pp-theme-toggle-knob {
    left: 26px;
}

/* ----------------------------------------------------------------
   22. BLAZOR ERROR BOUNDARY
   ---------------------------------------------------------------- */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyMjYuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after { content: "Ha ocurrido un error."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }
h1:focus { outline: none; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ============================================================
   Splash de carga inicial (Blazor WASM bootstrap)
   ============================================================ */
@keyframes pp-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   Skeleton loading con efecto shimmer elegante
   ============================================================ */
@keyframes pp-skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.pp-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--pp-bg-glass-inner, rgba(255,255,255,0.05));
    border-radius: 8px;
}

.pp-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.04) 20%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.04) 80%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: pp-skeleton-shimmer 2s ease-in-out infinite;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .pp-skeleton::after { animation: none; }
}

/* ============================================================
   Google Maps Places Autocomplete (dropdown de direcciones)
   Alinea el dropdown con el tema oscuro de la app y reemplaza
   el icono por defecto de Google por un pin de ubicación.
   ============================================================ */
.pac-container {
    border-radius: 14px;
    border: 1px solid var(--pp-border-glass, rgba(255,255,255,0.1));
    background: var(--pp-bg-card, #1e1e2e);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
    font-family: inherit;
    margin-top: 6px;
    padding: 4px 0;
    z-index: 9999;
}
.pac-item {
    padding: 10px 14px;
    cursor: pointer;
    border-top: 1px solid var(--pp-border-glass, rgba(255,255,255,0.06));
    color: var(--pp-text-primary, #e5e7eb);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
}
.pac-item:first-child { border-top: none; }
.pac-item:hover, .pac-item-selected {
    background: var(--pp-accent-tint, rgba(56,189,248,0.12));
}
.pac-item-query { color: var(--pp-text-primary, #e5e7eb); }
.pac-matched { color: var(--pp-accent, #38bdf8); }

/* Ocultar el icono por defecto de Google (incorrecto para el tema) */
.pac-icon {
    display: none !important;
    background-image: none !important;
    background-color: transparent !important;
}

/* Mostrar un pin de ubicación alineado con el tema */
.pac-item::before {
    content: "\f3c5";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    margin-right: 10px;
    color: var(--pp-accent, #38bdf8);
    font-size: 0.8rem;
    flex-shrink: 0;
}
.pac-item > .pac-icon ~ .pac-item-query { padding-left: 0; }
.pac-logo { margin-top: 4px; padding: 4px 14px; }
.pac-logo::after {
    content: "Powered by Google";
    color: var(--pp-text-muted, #9ca3af);
    font-size: 0.7rem;
}

/* ===== Tutorial primer uso (coach-mark) ===== */
/* IMPORTANTE: NO usar z-index aquí — crearía un stacking context que atraparía
   el dropdown de sugerencias debajo de la burbuja (z-260) y bloquearía los clics. */
.pp-tutorial-target {
    position: relative;
    border-radius: 0.9rem;
    animation: ppTutorialPulse 1.6s ease-in-out infinite;
}
.pp-tutorial-target:not(.pp-cta) {
    outline: 2px solid rgba(var(--pp-primary-rgb), 0.7);
    outline-offset: 4px;
}
@keyframes ppTutorialPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--pp-primary-rgb), 0.5); }
    50% { box-shadow: 0 0 0 9px rgba(var(--pp-primary-rgb), 0); }
}
.pp-tutorial-bubble {
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.45);
}
.pp-tutorial-arrow {
    border: 1px solid #e2e8f0;
}

/* ============================================================
   24. VISUAL REFRESH
   Un lenguaje más editorial: superficies elevadas, contraste claro
   y estados de interacción consistentes en toda la aplicación.
   ============================================================ */
::selection { background: rgba(var(--pp-primary-rgb), .24); color: var(--pp-text-primary); }

body {
    background-image: radial-gradient(circle at 12% -10%, rgba(var(--pp-primary-rgb), .10), transparent 34rem), var(--pp-bg-body);
}

.light-theme body {
    background-image: radial-gradient(circle at 12% -10%, rgba(var(--pp-primary-rgb), .16), transparent 32rem), radial-gradient(circle at 92% 18%, rgba(var(--pp-secondary-rgb), .09), transparent 28rem), var(--pp-bg-body);
}

.pp-app-header {
    border-bottom: 1px solid transparent;
    transition: border-color .25s ease, background .25s ease;
}

.pp-app-header > div {
    min-height: 3.3rem;
}

.pp-app-header:hover {
    border-color: var(--pp-border-glass);
}

.pp-hero h2 {
    letter-spacing: -.055em;
    text-wrap: balance;
}

.pp-hero p {
    max-width: 34rem;
}

.pp-app-main {
    isolation: isolate;
}

.pp-card,
.glass-panel {
    background: color-mix(in srgb, var(--pp-bg-card) 94%, transparent);
    border-color: color-mix(in srgb, var(--pp-border) 86%, transparent);
    box-shadow: var(--pp-shadow);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.pp-card:hover {
    border-color: color-mix(in srgb, var(--pp-border-strong) 72%, transparent);
}

.light-theme .pp-card,
.light-theme .glass-panel {
    box-shadow: 0 12px 32px rgba(15, 23, 42, .055), 0 2px 6px rgba(15, 23, 42, .035);
}

.pp-step-card {
    border-radius: 24px;
    background: linear-gradient(145deg, color-mix(in srgb, var(--pp-bg-card) 98%, transparent), rgba(var(--pp-primary-rgb), .045));
}

.pp-step-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    border-radius: 24px 24px 0 0;
    background: var(--pp-grad);
    opacity: .8;
}

.pp-form-card {
    border-radius: 24px;
}

.pp-form-card .pp-type-card {
    min-height: 104px;
}

.pp-type-card--selected {
    background: linear-gradient(145deg, var(--pp-primary), var(--pp-primary-dark)) !important;
    box-shadow: 0 10px 22px rgba(var(--pp-primary-rgb), .20);
}

.pp-type-card-unselected:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(var(--pp-primary-rgb), .09);
}

.pp-chip > div,
.pp-input,
.glass-input,
.pp-btn-secondary,
.pp-icon-btn {
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease, color .2s ease;
}

.pp-input,
.glass-input {
    min-height: 46px;
}

.pp-input:focus,
.glass-input:focus {
    box-shadow: 0 0 0 4px rgba(var(--pp-primary-rgb), .12), 0 6px 18px rgba(var(--pp-primary-rgb), .08);
}

.pp-cta {
    background: var(--pp-grad);
    box-shadow: 0 8px 18px rgba(var(--pp-primary-rgb), .18);
    font-weight: 700;
}

.pp-cta:hover:not(:disabled) {
    box-shadow: 0 12px 25px rgba(var(--pp-primary-rgb), .25);
}

.pp-btn-secondary:hover,
.pp-icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 18px rgba(var(--pp-primary-rgb), .08);
}

.pp-results > .mb-4,
.pp-results > .mb-3 {
    padding-bottom: .65rem;
    border-bottom: 1px solid var(--pp-border-glass);
}

@media (max-width: 640px) {
    .pp-app-header { padding-top: 1rem !important; }
    .pp-app-header h1 { font-size: 1.15rem; }
    .pp-app-header p { display: none; }
    .pp-hero { padding-top: 2.5rem !important; }
    .pp-hero h2 { font-size: 2rem !important; }
    .pp-hero p { font-size: .9rem; margin-top: .9rem; }
    .pp-step-card,
    .pp-form-card { border-radius: 20px; }
    .pp-form-card .pp-type-card { min-height: 90px; }
}

@media (prefers-reduced-motion: reduce) {
    .pp-card, .pp-cta, .pp-btn-secondary, .pp-icon-btn, .pp-type-card { transition: none; }
}