@layer wsl-base, wsl-components, wsl-studio, wsl-responsive, wsl-action-buttons;

@layer wsl-base {
  .wapu-social-links-page{margin:0}
  .wsl-page{
    --wsl-bg:#f3e9df;--wsl-card-color:#fff;--wsl-title:#171a22;--wsl-text:#171a22;
    --wsl-button:#7c3aed;--wsl-button-text:#fff;--wsl-button-hover:#5b21b6;--wsl-accent:#7c3aed;
    --wsl-overlay-color:#000;--wsl-overlay-opacity:0;--wsl-focal-x:50%;--wsl-focal-y:50%;--wsl-image:none;
    --wsl-card-radius:28px;--wsl-card-shadow:0 16px 36px rgba(16,16,16,.08);
    --wsl-motion-duration:.18s;--wsl-motion-distance:3px;
    position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:32px 16px;
    background:var(--wsl-bg);color:var(--wsl-text);font-family:var(--pg-style-body,Manrope,Inter,Arial,sans-serif)
  }
  .wsl-page::before,.wsl-page::after{content:"";position:fixed;inset:0;pointer-events:none}
  .wsl-page::before{z-index:-2;background-image:var(--wsl-image);background-size:cover;background-position:var(--wsl-focal-x) var(--wsl-focal-y);background-repeat:no-repeat;opacity:0}
  .wsl-page::after{z-index:-1;background:var(--wsl-overlay-color);opacity:0}
  .wsl-page.is-bg-image::before{opacity:1}.wsl-page.is-bg-image::after{opacity:var(--wsl-overlay-opacity)}
  .wsl-page.is-bg-transparent{background:transparent}
  .wsl-page.is-motion-none{--wsl-motion-duration:0ms;--wsl-motion-distance:0px}
  .wsl-page.is-motion-soft{--wsl-motion-duration:.12s;--wsl-motion-distance:1px}
  .wsl-page.is-motion-normal{--wsl-motion-duration:.18s;--wsl-motion-distance:3px}
  .wsl-page.is-motion-expressive{--wsl-motion-duration:.28s;--wsl-motion-distance:5px}
}

@layer wsl-components {
  .wsl-card{width:min(100%,390px);padding:34px 22px;text-align:center;border:1px solid color-mix(in srgb,var(--wsl-text) 14%,transparent);border-radius:var(--wsl-card-radius);background:var(--wsl-card-color);box-shadow:var(--wsl-card-shadow)}
  .is-layout-compact .wsl-card{width:min(100%,350px);padding:28px 20px}.is-layout-compact .wsl-logo{width:64px;height:64px;border-radius:20px;margin-bottom:12px}.is-layout-compact .wsl-links{gap:10px;margin-top:16px}
  .is-layout-editorial .wsl-card{width:min(100%,460px);padding:38px 30px}.is-layout-editorial .wsl-logo{width:88px;height:88px}.is-layout-editorial .wsl-card h1{font-size:34px}
  .is-card-flat .wsl-card{border-color:transparent;background:transparent;box-shadow:none}.is-card-glass .wsl-card{background:color-mix(in srgb,var(--wsl-card-color) 68%,transparent);backdrop-filter:blur(18px)}
  .is-radius-none{--wsl-card-radius:0}.is-radius-sm{--wsl-card-radius:12px}.is-radius-md{--wsl-card-radius:20px}.is-radius-lg{--wsl-card-radius:32px}.is-radius-pill{--wsl-card-radius:48px}
  .is-shadow-none{--wsl-card-shadow:none}.is-shadow-soft{--wsl-card-shadow:0 12px 30px color-mix(in srgb,var(--wsl-text) 8%,transparent)}.is-shadow-medium{--wsl-card-shadow:0 18px 44px color-mix(in srgb,var(--wsl-text) 13%,transparent)}.is-shadow-strong{--wsl-card-shadow:0 24px 64px color-mix(in srgb,var(--wsl-text) 20%,transparent)}
  .is-align-left .wsl-card{text-align:left}.is-align-left .wsl-socials{justify-content:flex-start}
  .wsl-logo{width:76px;height:76px;display:inline-grid;place-items:center;object-fit:cover;border-radius:24px;margin-bottom:16px}.wsl-logo--empty{background:color-mix(in srgb,var(--wsl-accent) 12%,white);color:var(--wsl-accent);font:900 28px/1 var(--pg-style-heading,inherit)}
  .wsl-card h1{margin:0;color:var(--wsl-title);font:800 29px/1.08 var(--pg-style-heading,Poppins,Georgia,serif);letter-spacing:-.025em}.wsl-intro{max-width:30ch;margin:8px auto;color:var(--wsl-text);opacity:.72}.is-align-left .wsl-intro{margin-left:0}
  .wsl-status{margin:8px 0;padding:6px 10px;display:inline-flex;align-items:center;gap:6px;border:1px solid color-mix(in srgb,currentColor 42%,transparent);border-radius:99px;font-size:12px}.wsl-status i{width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,#e85e50 86%,var(--wsl-text))}.wsl-status.is-open i{background:color-mix(in srgb,#20a56f 88%,var(--wsl-text))}
  .wsl-location{margin:8px 0;display:inline-flex;align-items:center;gap:6px;font-size:13px;opacity:.68}.wsl-location .pgui-icon{width:14px;height:14px;flex:none}
  .wsl-socials{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:20px 0}.wsl-socials :is(a,span){width:40px;height:40px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--wsl-accent) 54%,transparent);border-radius:12px;background:color-mix(in srgb,var(--wsl-accent) 8%,transparent);color:var(--wsl-accent);text-decoration:none;font-size:11px;font-weight:900;transition:transform var(--wsl-motion-duration) ease,background var(--wsl-motion-duration) ease,color var(--wsl-motion-duration) ease,box-shadow var(--wsl-motion-duration) ease}.wsl-socials a:hover{transform:translateY(calc(var(--wsl-motion-distance) * -.67));background:var(--wsl-accent);color:var(--wsl-card-color);box-shadow:0 8px 20px color-mix(in srgb,var(--wsl-accent) 24%,transparent)}
  .wsl-links{display:grid;gap:12px;margin-top:20px}.wsl-links a{--wsl-link-button:var(--wsl-button);--wsl-link-text:var(--wsl-button-text);--wsl-link-hover:var(--wsl-button-hover);min-height:56px;padding:12px 16px;display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:10px;border:1px solid var(--wsl-link-button);border-radius:12px;background:transparent;color:var(--wsl-link-button);text-align:left;text-decoration:none;font-weight:800;box-shadow:0 0 0 transparent;transition:transform var(--wsl-motion-duration) ease,background var(--wsl-motion-duration) ease,color var(--wsl-motion-duration) ease,border-color var(--wsl-motion-duration) ease,box-shadow var(--wsl-motion-duration) ease}.wsl-links a>.wsl-link-emoji,.wsl-links a>.wsl-native-emoji{font-style:normal;text-align:center;font-size:19px}.wsl-links a>b{width:18px;height:18px;display:grid;place-items:center;transition:transform var(--wsl-motion-duration) ease}.wsl-links a>b .pgui-icon{width:16px;height:16px}.wsl-links a>img{width:48px;height:48px;margin-block:-8px;object-fit:cover;border-radius:12px}
  .wsl-native-emoji,.wsl-link-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-variant-emoji:emoji}.wsl-native-emoji[data-wsl-native-emoji]{display:inline-grid;place-items:center}.wsl-native-emoji[data-wsl-native-emoji]::before{content:attr(data-wsl-native-emoji)}
  .is-pill .wsl-links a{border-radius:99px}.is-square .wsl-links a{border-radius:4px}.is-rounded .wsl-links a{border-radius:14px}
  .is-solid .wsl-links a,.wsl-links a.is-featured{border-color:var(--wsl-link-button);background:var(--wsl-link-button);color:var(--wsl-link-text)}.is-soft .wsl-links a{border-color:transparent;background:color-mix(in srgb,var(--wsl-link-button) 13%,transparent);color:var(--wsl-link-button)}
  .is-button-compact .wsl-links a{min-height:48px;padding-block:8px}.is-button-large .wsl-links a{min-height:64px;padding:16px 18px;font-size:16px}
  .wsl-links a:hover,.wsl-links a:focus-visible{border-color:var(--wsl-link-hover);background:var(--wsl-link-hover);color:var(--wsl-link-text);outline:0}.is-hover-lift .wsl-links a:hover{transform:translateY(calc(var(--wsl-motion-distance) * -1));box-shadow:0 12px 26px color-mix(in srgb,var(--wsl-link-hover) 24%,transparent)}.is-hover-glow .wsl-links a:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--wsl-link-hover) 18%,transparent),0 12px 28px color-mix(in srgb,var(--wsl-link-hover) 28%,transparent)}.is-hover-slide .wsl-links a:hover>b{transform:translateX(var(--wsl-motion-distance))}.is-hover-none .wsl-links a:hover{transform:none;box-shadow:none}
  .wsl-links a.wsl-link--solid{border-color:var(--wsl-link-button);background:var(--wsl-link-button);color:var(--wsl-link-text)}.wsl-links a.wsl-link--soft{border-color:transparent;background:color-mix(in srgb,var(--wsl-link-button) 13%,transparent);color:var(--wsl-link-button)}.wsl-links a.wsl-link--outline{border-color:var(--wsl-link-button);background:transparent;color:var(--wsl-link-button)}.wsl-links a.wsl-link--glass{border-color:color-mix(in srgb,var(--wsl-link-button) 28%,transparent);background:color-mix(in srgb,var(--wsl-card-color) 58%,transparent);color:var(--wsl-link-button);backdrop-filter:blur(14px);box-shadow:0 10px 28px color-mix(in srgb,var(--wsl-text) 8%,transparent)}
  .wsl-links a.wsl-link--pill{border-radius:999px}.wsl-links a.wsl-link--square{border-radius:4px}.wsl-links a.wsl-link--rounded{border-radius:14px}
  .wsl-links a.wsl-link--size-compact{min-height:48px;padding-block:8px}.wsl-links a.wsl-link--size-large{min-height:64px;padding:16px 18px;font-size:16px}
  .wsl-links a.wsl-link--hover-lift:hover{transform:translateY(calc(var(--wsl-motion-distance) * -1));box-shadow:0 12px 26px color-mix(in srgb,var(--wsl-link-hover) 24%,transparent)}.wsl-links a.wsl-link--hover-glow:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--wsl-link-hover) 18%,transparent),0 12px 28px color-mix(in srgb,var(--wsl-link-hover) 28%,transparent)}.wsl-links a.wsl-link--hover-slide:hover>b{transform:translateX(var(--wsl-motion-distance))}.wsl-links a.wsl-link--hover-none:hover{transform:none;box-shadow:none}
  .wsl-links a:focus-visible,.wsl-socials a:focus-visible,.wsl-brand:focus-visible{outline:3px solid color-mix(in srgb,var(--wsl-accent) 38%,transparent);outline-offset:3px}
  .wsl-links a.is-preview-incomplete{opacity:.58}
  .wsl-brand{display:inline-block;margin-top:32px;color:var(--wsl-text);opacity:.66;text-decoration:none;font-size:12px}.wsl-brand strong{color:var(--wsl-accent)}
  .pgui-preview .wsl-page{min-height:680px;padding:28px 16px}.pgui-preview[data-device="tablet"] .wsl-page,.pgui-preview[data-device="desktop"] .wsl-page{min-height:680px}
}

@layer wsl-studio {
  .pgui-social-color-grid{display:grid;gap:16px}.pgui-social-color-grid .pgui-color-picker{padding:16px;border:1px solid var(--pgui-line);border-radius:16px;background:var(--pgui-surface-soft)}.pgui-social-contrast-stack{display:grid;gap:8px}

  /* Social Studio compone los mismos tokens y controles de Playground en un layout más ligero. */
  .pgui-social-studio{--pgui-header-height:80px;--pgui-nav-width:72px;--pgui-inspector-width:360px}
  .pgui-social-studio .pgui-studio__header{padding-inline:24px}
  .pgui-social-studio .pgui-studio__brand-mark{width:48px;height:48px;border-radius:16px;background:var(--pgui-action)}
  .pgui-social-studio .pgui-studio__actions{display:flex;align-items:center;gap:8px}
  .pgui-social-studio .pgui-studio__body{grid-template-columns:72px minmax(440px,1fr) 360px}
  .pgui-social-studio .pgui-nav--rail{padding:16px 8px}
  .pgui-social-studio .pgui-nav--rail .pgui-nav__items{margin:0;gap:16px}
  .pgui-social-studio .pgui-nav--rail .pgui-nav__item{width:48px;height:48px;min-height:48px;margin-inline:auto;padding:0;justify-content:center;border-radius:16px}
  .pgui-social-studio .pgui-nav--rail .pgui-nav__item .pgui-icon{width:22px;height:22px}
  .pgui-social-studio .pgui-canvas__toolbar{margin-top:12px;box-shadow:0 8px 20px rgba(15,23,42,.08)}
  .pgui-social-studio .pgui-canvas__toolbar .pgui-icon{width:18px;height:18px;margin:auto}
  .pgui-social-studio .pgui-canvas__toolbar [data-action="real-preview"]{width:auto;padding-inline:12px;display:flex;align-items:center;gap:8px}
  .pgui-social-studio .pgui-canvas__toolbar [data-action="real-preview"] span{font-size:11px;font-weight:800}
  .pgui-social-studio .pgui-canvas__stage{padding:16px 24px 24px}
  .pgui-social-studio .pgui-preview{min-height:640px}
  .pgui-social-studio .pgui-preview .wsl-page{min-height:640px}
  .pgui-social-studio .pgui-preview .wsl-card{min-height:590px;display:flex;flex-direction:column;align-items:center}
  .pgui-social-studio .pgui-preview .wsl-links{width:100%}
  .pgui-social-studio .pgui-preview .wsl-brand{margin-top:auto;padding-top:24px}

  .pgui-social-studio .pgui-inspector__header{min-height:112px;padding:24px;display:flex;align-items:flex-start;gap:12px}
  .pgui-social-studio .pgui-inspector__header>div{min-width:0}
  .pgui-social-studio .pgui-inspector__header h2{font-size:22px}
  .pgui-social-studio .pgui-inspector__back{flex:0 0 40px;margin-left:-8px}
  .pgui-social-studio .pgui-inspector__content{padding:24px;gap:24px}
  .pgui-social-studio .pgui-section__head>.pgui-help{font-size:11px}
  .pgui-social-studio .pgui-social-link-list{gap:12px}
  .pgui-social-link-row{min-height:88px;padding:12px 10px;display:grid;grid-template-columns:24px 44px minmax(0,1fr) 36px 36px;align-items:center;gap:8px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
  .pgui-social-link-row:hover{border-color:color-mix(in srgb,var(--pgui-action) 28%,var(--pgui-line));box-shadow:0 8px 24px rgba(15,23,42,.06);transform:translateY(-1px)}
  .pgui-social-link-row button{border:0;background:transparent;color:var(--pgui-muted);cursor:pointer}
  .pgui-social-link-row__drag{padding:0;cursor:grab}
  .pgui-social-link-row__emoji{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:var(--pgui-action-soft);font-size:20px}
  .pgui-social-link-row__copy{min-width:0;padding:0;text-align:left;display:grid;gap:3px}
  .pgui-social-link-row__copy strong,.pgui-social-link-row__copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pgui-social-link-row__copy strong{color:var(--pgui-text);font:800 13px/1.3 var(--pgui-font-body)}
  .pgui-social-link-row__copy small{color:var(--pgui-muted);font:500 10px/1.3 var(--pgui-font-help)}
  .pgui-social-link-row__visibility,.pgui-social-link-row__more{width:36px;height:36px;padding:8px;display:grid;place-items:center;border-radius:10px}
  .pgui-social-link-row__visibility:hover,.pgui-social-link-row__more:hover{background:var(--pgui-action-soft);color:var(--pgui-action)}
  .pgui-social-link-row__visibility.is-off{opacity:.36}
  .pgui-social-link-row .pgui-icon{width:18px;height:18px}
  .pgui-social-quick-actions{margin-top:auto;display:grid;border:1px solid var(--pgui-line);border-radius:16px;overflow:hidden}
  .pgui-social-quick-actions>button{min-height:64px;padding:12px 14px;display:grid;grid-template-columns:24px minmax(0,1fr) 20px;align-items:center;gap:12px;border:0;border-bottom:1px solid var(--pgui-line);background:var(--pgui-surface);color:var(--pgui-text);text-align:left;cursor:pointer}
  .pgui-social-quick-actions>button:last-child{border-bottom:0}
  .pgui-social-quick-actions>button:hover{background:var(--pgui-surface-soft)}
  .pgui-social-quick-actions>button>span{min-width:0;display:grid;gap:2px}
  .pgui-social-quick-actions strong,.pgui-social-quick-actions small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pgui-social-quick-actions strong{font-size:12px}.pgui-social-quick-actions small{color:var(--pgui-muted);font-size:10px}
  .pgui-social-quick-actions>button>.pgui-icon:last-child{transform:rotate(-90deg);color:var(--pgui-muted)}
  .pgui-social-link-editor__identity{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:end;gap:12px}
  .pgui-social-link-editor__identity .pgui-emoji-trigger{min-height:44px;grid-template-columns:1fr;padding:2px}
  .pgui-social-link-editor__identity .pgui-emoji-trigger>span{margin:auto}.pgui-social-link-editor__identity .pgui-emoji-trigger>b,.pgui-social-link-editor__identity .pgui-emoji-trigger>.pgui-icon{display:none}
  .pgui-social-link-editor__toggles{padding:4px 16px;border:1px solid var(--pgui-line);border-radius:16px;background:var(--pgui-surface-soft)}
  .pgui-social-editor-basic,.pgui-social-button-custom{display:grid;gap:16px}.pgui-social-editor-basic>small,.pgui-social-button-custom>small{color:var(--pgui-muted);font:900 10px/1.2 var(--pgui-font-help);letter-spacing:.12em}
  .pgui-social-global-style{padding:8px 16px 12px;border:1px solid var(--pgui-line);border-radius:16px;background:var(--pgui-surface)}.pgui-social-global-style>small{display:block;margin-top:-4px;color:var(--pgui-muted);font:500 10px/1.4 var(--pgui-font-help)}
  .pgui-social-button-custom{padding-top:8px;border-top:1px solid var(--pgui-line)}
  .pgui-preview .wsl-links a.is-editing{outline:3px solid color-mix(in srgb,var(--pgui-action) 74%,transparent);outline-offset:3px}
  .pgui-social-link-editor .pgui-repeater__actions{margin-top:auto}.pgui-social-editor-actions{justify-content:space-between;padding-top:8px;border-top:1px solid var(--pgui-line)}
  .pgui-social-studio .pgui-toast{opacity:1;transition:opacity .18s ease,transform .18s ease}.pgui-social-studio .pgui-toast[data-status="saved"]{opacity:0;pointer-events:none;transform:translate(-50%,8px)}
  .pgui-social-publication{padding:12px 16px;border:1px solid var(--pgui-line);border-radius:16px;background:var(--pgui-surface)}.pgui-social-publication>small{display:block;margin-top:4px;color:var(--pgui-muted);font-size:10px;line-height:1.4}
  .pgui-social-diagnostics{padding:14px 16px;border:1px solid var(--pgui-line);border-radius:16px;background:var(--pgui-surface-soft)}.pgui-social-diagnostics>div{display:grid;gap:3px}.pgui-social-diagnostics strong{font-size:12px}.pgui-social-diagnostics small{color:var(--pgui-muted);font-size:10px}.pgui-social-diagnostics ul{margin:12px 0 0;padding:12px 0 0 18px;border-top:1px solid var(--pgui-line);display:grid;gap:8px}.pgui-social-diagnostics li{font-size:11px;line-height:1.4}.pgui-social-diagnostics[data-state="error"]{border-color:color-mix(in srgb,var(--pgui-danger) 36%,var(--pgui-line));background:color-mix(in srgb,var(--pgui-danger) 7%,var(--pgui-surface))}.pgui-social-diagnostics[data-state="warning"]{border-color:color-mix(in srgb,var(--pgui-action) 30%,var(--pgui-line));background:color-mix(in srgb,var(--pgui-action) 6%,var(--pgui-surface))}.pgui-social-diagnostics[data-state="ready"]{border-color:color-mix(in srgb,var(--pgui-success) 32%,var(--pgui-line));background:color-mix(in srgb,var(--pgui-success) 7%,var(--pgui-surface))}

  @media(max-width:1180px){.pgui-social-studio{--pgui-inspector-width:336px}.pgui-social-studio .pgui-studio__body{grid-template-columns:72px minmax(400px,1fr) 336px}.pgui-social-studio .pgui-studio__status{display:none}}
  @media(max-width:920px){.pgui-social-studio{height:auto;min-height:100vh;overflow:auto}.pgui-social-studio .pgui-studio__body{grid-template-columns:72px minmax(420px,1fr) 336px;overflow:auto}.pgui-social-studio .pgui-studio__header{grid-template-columns:1fr auto}.pgui-social-studio .pgui-studio__actions .pgui-button[data-size="icon"]{display:none}}

  .pgui-social-appearance-group{display:grid;gap:14px}.pgui-social-appearance-group>.pgui-field__label{font-size:11px;font-weight:850;color:var(--pgui-text)}
  .pgui-social-background-media{display:grid;gap:12px}.pgui-social-background-media .pgui-focal-point{margin-top:4px}
  .pgui-social-appearance-actions{display:flex;justify-content:flex-end}.pgui-social-appearance-actions .pgui-reset-control{width:100%}
  .pgui-social-preset-note{margin:0;color:var(--pgui-muted);font-size:10px;line-height:1.45}
}

@layer wsl-responsive {
  @media(max-width:480px){.wapu-social-links-page .wsl-page{padding:0;min-height:100svh}.wapu-social-links-page .wsl-card{min-height:100vh;min-height:100svh;border:0;border-radius:0;box-shadow:none;padding:42px 20px}.wapu-social-links-page .is-layout-editorial .wsl-card{width:100%}}
  @media(prefers-reduced-motion:reduce){.wsl-page{--wsl-motion-duration:0ms;--wsl-motion-distance:0px}.wsl-links a:hover,.wsl-socials a:hover{transform:none}}
}

@layer wsl-action-buttons {
  .wsl-page.is-ghost .wsl-links a,.wsl-links a.wsl-link--ghost{background:transparent;color:var(--wsl-button);border-color:transparent;box-shadow:none}
  .wsl-links a.wsl-link--ghost{color:var(--wsl-link-button)}
  .wsl-page.is-hover-darken .wsl-links a:hover,.wsl-links a.wsl-link--hover-darken:hover{filter:brightness(.9)}
  .wsl-page.is-hover-fill.is-outline .wsl-links a:hover,.wsl-page.is-hover-fill.is-ghost .wsl-links a:hover{background:var(--wsl-button);color:var(--wsl-button-text)}
  .wsl-links a.wsl-link--hover-fill.wsl-link--outline:hover,.wsl-links a.wsl-link--hover-fill.wsl-link--ghost:hover{background:var(--wsl-link-button);color:var(--wsl-link-text)}
  :is(.wsl-page.is-icon-end .wsl-links a,.wsl-links a.wsl-link--icon-end){grid-template-columns:minmax(0,1fr) auto 28px auto}
  :is(.wsl-page.is-icon-end .wsl-links a,.wsl-links a.wsl-link--icon-end)>span{order:initial;grid-column:1;min-width:0}
  :is(.wsl-page.is-icon-end .wsl-links a,.wsl-links a.wsl-link--icon-end)>img{order:initial;grid-column:2}
  :is(.wsl-page.is-icon-end .wsl-links a,.wsl-links a.wsl-link--icon-end)>i{order:initial;grid-column:3}
  :is(.wsl-page.is-icon-end .wsl-links a,.wsl-links a.wsl-link--icon-end)>b{order:initial;grid-column:4}
}