/* Share section styles — extracted from /share/index.html */

/* Reset (kept here for now; shell also has minimal reset) */
*{margin:0;padding:0;box-sizing:border-box;}

/* Theme tokens viven en /assets/wb-tokens-{primitive,semantic}.css */
img.logo-light{display:none!important;}
[data-theme="light"] img.logo-dark{display:none!important;}
[data-theme="light"] img.logo-light{display:block!important;}
html,body{background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;}
body[data-active-section="share"]{font-size:var(--wb-text-md);}

.app{display:flex;height:100dvh;overflow:hidden;}

.sidebar{width:220px;background:var(--surface);border-right:1px solid var(--border);padding:0;display:flex;flex-direction:column;position:fixed;height:100dvh;overflow-y:auto;z-index:50;}
.sb-header{padding:0 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;height:52px;box-sizing:border-box;}
.sb-header img{height:26px;width:auto;object-fit:contain;object-position:left center;display:block;}
.sb-nav{flex:1;overflow-y:auto;padding:8px 0;}
.sb-label{padding:10px 16px 4px;font-size:var(--wb-text-xs);font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--dim);}
.sb-item{display:flex;align-items:center;gap:9px;padding:7px 16px;margin:1px 8px;cursor:pointer;color:var(--muted);border-radius:var(--wb-radius-md);font-size:var(--wb-text-base);font-weight:500;transition:all var(--transition);text-decoration:none;}
.sb-item:hover{background:var(--surface2);color:var(--text);}
.sb-item.active{background:var(--accent-bg);color:var(--accent);}
.sb-item svg{width:16px;height:16px;flex-shrink:0;opacity:.7;}
.sb-item.active svg{opacity:1;}
.sb-user{padding:12px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:10px;cursor:pointer;transition:background var(--transition);position:relative;}
.sb-user:hover{background:var(--surface2);}
.sb-avatar{width:32px;height:32px;border-radius:var(--radius);background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:var(--wb-text-sm);flex-shrink:0;overflow:hidden;position:relative;}
.sb-avatar canvas{width:32px;height:32px;image-rendering:pixelated;}
.sb-user-info{flex:1;min-width:0;}
.sb-user-info .name{font-weight:600;font-size:var(--wb-text-base);color:var(--white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sb-user-info .role{font-size:var(--wb-text-xs);color:var(--muted);}
.sb-user-menu{position:absolute;bottom:54px;left:12px;right:12px;background:var(--surface2);border:1px solid var(--border2);border-radius:var(--radius);box-shadow:var(--shadow);display:none;z-index:310;overflow:hidden;}
.sb-user-menu.show{display:block;}
.sb-user-menu a{display:flex;align-items:center;gap:8px;padding:9px 14px;color:var(--text2);font-size:var(--wb-text-base);cursor:pointer;transition:background var(--transition);text-decoration:none;}
.sb-user-menu a:hover{background:var(--surface3);}

.main{margin-left:220px;flex:1;display:flex;flex-direction:column;overflow:hidden;}
.topbar{padding:0 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;background:var(--surface);flex-shrink:0;height:52px;box-sizing:border-box;}
.topbar-title{font-size:var(--wb-text-xl);font-weight:400;color:var(--text);flex:1;font-family:'Cossette Titre',sans-serif;letter-spacing:-0.01em;}
.topbar-actions{display:flex;gap:8px;align-items:center;}
.hub-header-btn{padding:7px 12px;border-radius:var(--wb-radius-md);border:1px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;font-size:var(--wb-text-base);font-weight:600;display:inline-flex;align-items:center;gap:6px;text-decoration:none;font-family:inherit;transition:all var(--transition);}
.hub-header-btn:hover{color:var(--text);border-color:var(--dim);background:var(--surface2);}
.content{flex:1;overflow-y:auto;padding:20px 24px;}

/* .btn / .btn-primary / .btn-ghost → wb-components.css */

input[type="email"],input[type="text"]{background:var(--surface2);border:1px solid var(--border);border-radius:var(--wb-radius-md);padding:8px 12px;color:var(--text);font-size:var(--wb-text-base);outline:none;font-family:inherit;width:100%;}
input:focus{border-color:var(--accent);}

/* MOBILE HEADER */
.mobile-header{display:none;position:sticky;top:0;left:0;z-index:300;background:var(--surface);border-bottom:1px solid var(--border);width:100%;height:54px;padding:0 16px;align-items:center;justify-content:space-between;flex-shrink:0;}
.mobile-header .mh-logo img{max-height:26px;max-width:140px;object-fit:contain;}
.hamburger{background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius);width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-direction:column;gap:4px;padding:0;}
.hamburger span{display:block;width:18px;height:2px;background:var(--text);border-radius:2px;transition:all .2s;}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(4px,4px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(4px,-4px);}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;}
.sidebar-overlay.open{display:block;}

/* BREADCRUMB */
.breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:18px;font-size:var(--wb-text-base);}
.bc-item{color:var(--accent);cursor:pointer;font-weight:600;}
.bc-item:hover{text-decoration:underline;}
.bc-sep{color:var(--dim);}
.bc-current{color:var(--text2);font-weight:600;}

/* TOOLBAR */
.share-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap;}
.share-search{flex:1;min-width:180px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--wb-radius-md);padding:7px 12px;color:var(--text);font-size:var(--wb-text-base);outline:none;}
.share-search:focus{border-color:var(--accent);}
.client-picker{background:var(--surface2);border:1px solid var(--border);border-radius:var(--wb-radius-md);padding:7px 10px;color:var(--text);font-size:var(--wb-text-base);font-family:inherit;}

/* GRID */
.share-type-group{margin-bottom:18px;}
.share-type-label{display:inline-flex;align-items:center;gap:6px;font-size:var(--wb-text-xs);font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);padding:6px 0;margin:8px 0 8px;}
.share-type-label i{font-size:var(--wb-text-xs);opacity:.85;}
.share-type-badges{display:inline-flex;gap:4px;flex-wrap:wrap;}
.share-type-badge{display:inline-flex;align-items:center;gap:4px;font-size:9px;padding:2px 6px;border-radius:var(--wb-radius-sm);background:var(--surface2);color:var(--text);border:1px solid var(--border);text-transform:uppercase;font-weight:700;letter-spacing:.4px;}
.share-type-badge i{font-size:8px;opacity:.75;}
.share-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;}
.share-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:14px;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:all var(--transition);position:relative;overflow:hidden;}
.share-card:hover{border-color:var(--accent-border);transform:translateY(-1px);box-shadow:var(--shadow);}
.share-card .thumb{width:100%;aspect-ratio:4/3;background:var(--surface2);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:48px;}
.share-card .thumb img{width:100%;height:100%;object-fit:cover;}
.share-card .name{font-size:var(--wb-text-base);font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3;min-height:34px;word-break:break-word;}
.share-card .meta{font-size:var(--wb-text-xs);color:var(--muted);display:flex;align-items:center;gap:6px;justify-content:space-between;}
.share-card.is-folder .thumb{font-size:var(--wb-text-5xl);color:var(--accent);}

/* MODAL PREVIEW */
.preview-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:1000;display:none;align-items:center;justify-content:center;padding:0;}
.preview-overlay.show{display:flex;}
.preview-box{position:relative;width:100%;height:100%;display:flex;flex-direction:column;background:#000;}
.preview-header{display:flex;align-items:center;gap:10px;padding:10px 16px;background:rgba(0,0,0,.85);color:#fff;border-bottom:1px solid #222;flex-shrink:0;}
.preview-title{flex:1;font-size:var(--wb-text-md);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff;}
.preview-actions{display:flex;gap:8px;}
.preview-actions a,.preview-actions button{background:transparent;border:1px solid #444;color:#ddd;padding:6px 12px;border-radius:var(--wb-radius-md);font-size:var(--wb-text-sm);cursor:pointer;text-decoration:none;font-family:inherit;font-weight:600;}
.preview-actions a:hover,.preview-actions button:hover{background:#222;color:#fff;}
.preview-body{flex:1;display:flex;align-items:center;justify-content:center;overflow:auto;background:#0a0a0a;}
.preview-body img{max-width:100%;max-height:100%;object-fit:contain;}
.preview-body video,.preview-body audio{max-width:100%;max-height:100%;}
.preview-body iframe{width:100%;height:100%;border:0;background:#fff;}
.preview-body pre{padding:24px;color:#eee;font-family:'Geist','Inter Tight',system-ui,sans-serif;font-size:var(--wb-text-base);white-space:pre-wrap;word-break:break-word;width:100%;height:100%;overflow:auto;background:#0a0a0a;box-sizing:border-box;}
.preview-loading{color:#888;font-size:var(--wb-text-md);}
.preview-nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.15);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--wb-text-lg);transition:background .12s;z-index:1010;}
.preview-nav:hover{background:rgba(0,0,0,.85);}
.preview-nav:disabled{opacity:.25;cursor:not-allowed;pointer-events:none;}
.preview-nav.prev{left:18px;}
.preview-nav.next{right:18px;}
.preview-counter{flex-shrink:0;}
@media(max-width:768px){
  .preview-nav{width:40px;height:40px;}
  .preview-nav.prev{left:8px;}
  .preview-nav.next{right:8px;}
}

/* EMPTY / ERROR STATES */
/* .empty-state / .spinner / .loading-block → wb-components.css */

@media(max-width:768px){
  html,body{overflow-x:hidden;}
  .main{margin-left:0!important;overflow-x:hidden;max-width:100vw;}
  .content{padding:14px 12px;}
  .mobile-header{display:flex;}
  .sidebar{position:fixed;left:0;top:54px;bottom:0;z-index:70;transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--shadow);}
  .sidebar.open{transform:translateX(0);}
  .sidebar .sb-header{display:none;}
  .sidebar-overlay.open{top:54px;}
  .topbar{display:none;}
  .share-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
  .share-card{padding:10px;}
  .share-card .name{font-size:12px;min-height:30px;}
  .preview-header{padding:8px 12px;}
  .preview-title{font-size:13px;}
  /* Touch targets >= 44px en mobile (WCAG 2.5.5) */
  .sb-item{min-height:44px;padding:11px 16px;}
  .hub-header-btn{min-width:44px;min-height:44px;}
  .hamburger{width:44px;height:44px;}
}
body.embed .mobile-header, body.embed .sidebar, body.embed .sidebar-overlay, body.embed .topbar, body.embed .embed-hide { display: none !important; }
body.embed .main { margin-left: 0 !important; }
body.embed .content { padding-top: 0 !important; }
body.embed { background: transparent; }

.menu-wrapper{position:relative;}
.menu-dropdown{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:180px;background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--glass-shadow);z-index:600;overflow:hidden;}
.menu-dropdown.show{display:block;}
.menu-dropdown a,.menu-dropdown button{display:flex;align-items:center;gap:10px;width:100%;padding:11px 14px;background:transparent;border:none;color:var(--text);font-size:var(--wb-text-base);font-weight:600;cursor:pointer;text-decoration:none;font-family:inherit;text-align:left;transition:background .12s,color .12s;}
.menu-dropdown a:hover,.menu-dropdown button:hover{background:var(--accent-bg);color:var(--accent);}
.menu-dropdown i{width:16px;text-align:center;color:var(--accent);}
@media(max-width:768px){.menu-dropdown{position:fixed!important;top:54px!important;right:8px!important;}}

.hub-modal-overlay{position:fixed;inset:0;background:var(--modal-overlay);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;z-index:9000;padding:24px;}
[data-theme="light"] .hub-modal-overlay{background:var(--modal-overlay);}
.hub-modal-overlay.show{display:flex;}
.hub-modal-content{position:relative;width:100%;max-width:760px;max-height:85vh;background:var(--glass-bg-strong);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--wb-radius-2xl);overflow:auto;box-shadow:var(--glass-shadow);display:flex;flex-direction:column;}
.hub-modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0;}
.hub-modal-titlebox{display:flex;flex-direction:column;gap:2px;}
.hub-modal-title{font-size:var(--wb-text-lg);font-weight:400;color:var(--white);text-transform:uppercase;letter-spacing:.5px;font-family:'Cossette Titre',sans-serif;}
.hub-modal-sub{font-size:var(--wb-text-sm);color:var(--muted);}
.hub-modal-close{width:34px;height:34px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface2);color:var(--muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;font-size:var(--wb-text-md);}
.hub-modal-close:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}
.hub-modal-section-label{font-size:var(--wb-text-xs);font-weight:400;color:var(--muted);text-transform:uppercase;letter-spacing:1px;padding:18px 24px 8px;font-family:'Cossette Titre',sans-serif;}
.hub-modal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;padding:0 24px;}
.hub-modal-secondary{display:grid;grid-template-columns:1fr auto;gap:12px;padding:0 24px 22px;}
.hub-card{position:relative;display:flex;align-items:center;gap:14px;padding:16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-lg);text-decoration:none;color:inherit;cursor:pointer;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;font-family:inherit;text-align:left;min-height:74px;}
.hub-card:hover{border-color:var(--accent);background:var(--accent-bg);transform:translateY(-2px);box-shadow:var(--shadow);}
.hub-card.disabled{opacity:.55;cursor:default;pointer-events:none;}
.hub-card-icon{width:42px;height:42px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:var(--wb-text-lg);flex-shrink:0;}
.hub-card-info{flex:1;min-width:0;}
.hub-card-title{font-size:var(--wb-text-md);font-weight:400;color:var(--white);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Cossette Titre',sans-serif;}
.hub-card-sub{font-size:var(--wb-text-xs);color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hub-card-sub i{margin-right:4px;}
.hub-card-icon-only{width:74px;min-height:74px;padding:0;display:flex;align-items:center;justify-content:center;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s;color:var(--orange);font-size:var(--wb-text-2xl);flex-shrink:0;}
.hub-card-icon-only:hover{border-color:var(--orange);background:var(--orange-bg);transform:translateY(-2px);box-shadow:var(--shadow);color:var(--orange);}
@media(max-width:760px){.hub-modal-grid{grid-template-columns:1fr 1fr;}.hub-modal-secondary{grid-template-columns:1fr auto;}}
@media(max-width:480px){.hub-modal-grid{grid-template-columns:1fr;}.hub-modal-secondary{grid-template-columns:1fr;}.hub-card-icon-only{width:100%;min-height:60px;}}
@media(max-width:768px){.hub-modal-overlay{padding:0;}.hub-modal-content{max-height:100dvh;border-radius:0;border:none;}}

/* ── v2 share features ─────────────────────────────────────── */

/* View toggle */
.share-view-toggle{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface2);}
.share-view-toggle .vbtn{background:transparent;border:0;color:var(--muted);padding:8px 12px;cursor:pointer;font-size:var(--wb-text-md);transition:all .15s;}
.share-view-toggle .vbtn:hover{background:var(--surface);color:var(--white);}
.share-view-toggle .vbtn.active{background:var(--accent);color:#fff;}

/* Selection: card overlay + checkbox */
.share-card{position:relative;}
.share-card.selected{outline:2px solid var(--accent);outline-offset:-2px;}
.share-card-check{position:absolute;top:6px;left:6px;z-index:3;opacity:0;transition:opacity .12s;}
.share-card:hover .share-card-check,.share-card.selected .share-card-check{opacity:1;}
.share-card-check input{width:18px;height:18px;cursor:pointer;}
.share-card-pin{position:absolute;top:6px;left:34px;background:rgba(0,0,0,.55);color:#fff;border:0;border-radius:50%;width:24px;height:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:var(--wb-text-xs);opacity:0;transition:opacity .12s;}
.share-card:hover .share-card-pin,.share-card .share-card-pin.is-pinned{opacity:1;}
.share-card-pin.is-pinned{color:var(--orange);}
.share-card-action{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.55);color:#fff;border:0;border-radius:50%;width:24px;height:24px;cursor:pointer;display:none;align-items:center;justify-content:center;font-size:var(--wb-text-xs);}
.share-card:hover .share-card-action{display:flex;}
.share-card-ctx{font-size:var(--wb-text-xs);color:var(--muted);margin-top:4px;padding:0 8px 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}

/* List view */
.share-list{display:flex;flex-direction:column;gap:2px;margin-top:14px;}
.share-row{display:grid;grid-template-columns:32px 40px 1fr auto auto auto;gap:12px;align-items:center;padding:8px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--wb-radius-md);cursor:pointer;transition:background .12s;font-size:var(--wb-text-base);color:var(--white);}
.share-row:hover{background:var(--surface);}
.share-row.selected{outline:2px solid var(--accent);outline-offset:-2px;}
.share-row-check input{width:16px;height:16px;cursor:pointer;}
.share-row-thumb{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--muted);background:var(--surface);border-radius:var(--wb-radius-sm);overflow:hidden;}
.share-row-thumb img{width:100%;height:100%;object-fit:cover;}
.share-row-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.share-row-meta{font-size:var(--wb-text-xs);color:var(--muted);min-width:60px;text-align:right;}
.share-row .share-card-pin{position:relative;top:auto;left:auto;background:transparent;color:var(--muted);opacity:1;width:auto;height:auto;}
.share-row .share-card-pin:hover{color:var(--orange);}
.share-row .share-card-pin.is-pinned{color:var(--orange);}

/* Selection bar (floating bottom) */
.share-selection-bar{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 18px;display:flex;align-items:center;gap:18px;box-shadow:var(--shadow-lg);z-index:120;animation:wb-bar-in .2s ease;}
@keyframes wb-bar-in{from{opacity:0;transform:translate(-50%,12px);}to{opacity:1;transform:translate(-50%,0);}}

/* Section content entrance: cada vez que innerHTML del content cambia, los hijos directos animan */
body[data-active-section="share"] #content > * {
  animation: wb-fade-in-up var(--motion-medium) var(--ease-out) backwards;
}
.share-selection-bar .ssb-count{font-size:var(--wb-text-base);color:var(--white);}
.share-selection-bar .ssb-actions{display:flex;gap:8px;}
.share-selection-bar .btn{font-size:var(--wb-text-base);padding:6px 14px;}

/* Better placement of share-card-action so it doesn't overlap pin */
.share-card.is-folder.is-resources .share-card-pin{display:none;}