/* drive_overrides.css — extraído del bloque <style> inline de drive.html (HIGH audit 14/06/2026).
   Overrides one-off del stack canónico (pd_drive.css/drive_pibico.css/collab.css) que vivían
   embebidos sin versionar. Movidos a fichero versionado; consolidar en pibico.css es trabajo aparte. */

    /* ─── Phosphor utilities (HIGH #5 FA→Phosphor migration 14/06/2026) ─── */
    /* Phosphor ships glyphs + weights but no spin/size helpers; FA-4 provided
       fa-spin / fa-3x. These replace them 1:1 so migrated <i> keep behaving. */
    .ph-spin { animation: ph-spin 1.4s linear infinite; display: inline-block; }
    @keyframes ph-spin { to { transform: rotate(360deg); } }
    .ph-3x { font-size: 3em; }
    .ph-2x { font-size: 2em; }
    /* ─── pd_drive.css CSS variables (not defined in pibiRAG standalone) ─── */
    :root {
      --bg-color: rgba(255, 255, 255, 0.92);
      --border-color: rgba(70, 130, 180, 0.15);
      --text-color: #2c3e50;
      --text-secondary: #5b6b7c;
      --sidebar-width: 260px;
      /* Frappe/pibiRAG-era tokens that pd_drive.css references but were never
         defined in this standalone app → mapped to pibiCo values. Without these,
         the companion's user bubble rendered invisible (var(--primary) was
         undefined → transparent + white text), the context bar/"search" was
         unstyled, and the footer colours were wrong. */
      --primary: var(--primary-color, #4682b4);
      --text-muted: #6b7a89;
      --bg-primary: #ffffff;
      --pibico-light-gray: #eef2f6;
      --pibico-mid-gray: rgba(70, 130, 180, 0.20);
      --control-bg-hover: rgba(70, 130, 180, 0.10);
      --navbar-height: 48px;
      --border-radius: 12px;
      --border-radius-sm: 8px;
    }

    /* ─── Talk2Doc layout: full viewport, no scroll, with footer ─── */
    html, body { height: 100%; overflow: hidden; }
    main.app-main {
      --content-gap: 8px;
      padding: var(--content-gap);
      height: calc(100vh - 48px - 28px);
      overflow: hidden;
    }

    /* Drive container: glass card with padding/gap from all edges */
    #pd-drive-root {
      height: 100%;
      overflow: hidden;
      background: var(--bg-color);
      border-radius: var(--radius, 12px);
      border: 1px solid var(--glass-border, rgba(255,255,255,0.3));
      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    }
    .pd-drive-container {
      height: 100% !important;
      min-height: unset !important;
      max-height: 100%;
      font-family: var(--font-body, 'Inter', sans-serif);
      background: var(--bg-color);
      border-radius: var(--radius, 12px);
    }

    /* Sidebar glass panel */
    .pd-sidebar {
      background: rgba(255, 255, 255, 0.6);
      border-right: 1px solid var(--border-color);
    }

    /* Main content panel */
    .pd-main-panel {
      background: rgba(255, 255, 255, 0.4);
    }

    /* Sidebar scrolls internally */
    .pd-sidebar { overflow-y: auto; }
    .pd-main-panel { overflow-y: auto; }

    /* ─── pibiCo footer — drive uses a slim dark glass variant over the
       gradient. Outside drive the same .app-footer renders as the canonical
       white glass from collab.css. The 28px height pairs with the layout
       calc(100vh - 48px - 28px) on main.app-main above. ─── */
    .app-footer {
      height: 28px;
      gap: 0.75rem;
      font-size: 0.7rem;
      color: rgba(255,255,255,0.7);
      background: rgba(44, 81, 113, 0.3);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-top: 1px solid rgba(255,255,255,0.15);
      white-space: nowrap;
    }
    .app-footer a,
    .app-footer .footer-link-btn { color: rgba(255,255,255,0.85); }
    .app-footer a:hover,
    .app-footer .footer-link-btn:hover { color: white; text-decoration: none; }
    .app-footer .footer-sep { color: rgba(255,255,255,0.4); }

    /* ─── Toolbar buttons: pibiCo glass style ─── */
    .pd-toolbar .pd-btn,
    .pd-toolbar button,
    .pd-path-bar button {
      background: var(--glass-bg, rgba(255,255,255,0.85));
      border: 1px solid var(--glass-border, rgba(255,255,255,0.3));
      border-radius: var(--radius-sm, 8px);
      color: var(--accent-color, #2c5171);
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 0.8rem;
      padding: 4px 10px;
      cursor: pointer;
      transition: background 0.15s, box-shadow 0.15s;
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }
    .pd-toolbar .pd-btn:hover,
    .pd-toolbar button:hover,
    .pd-path-bar button:hover {
      background: rgba(255,255,255,0.95);
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .pd-toolbar .pd-btn.active,
    .pd-toolbar button.active {
      background: var(--primary-color, #4682b4);
      color: white;
      border-color: var(--primary-color, #4682b4);
    }

    /* Workspace dropdown button */
    .pd-workspace-dropdown {
      font-family: var(--font-heading, 'Montserrat', sans-serif);
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--accent-color, #2c5171);
    }

    /* ─── Slide panel: full-height overlay, above navbar, equal gaps ─── */
    /* ─── ALL SLIDE PANELS: content-card aligned, no blur, no !important on position ───
       Content card boundaries: top=56px bottom=36px right=8px
       Panels use pointer-events:none when closed, auto when open.
       Inline styles from JS (drive_init.js _applyCurtainStyle) set exact position.
       CSS only handles: default hidden state + transitions. */

    .pd-details-panel,
    .pd-ai-chat-panel,
    .t2d-account-panel {
      position: fixed;
      top: 0; right: 0; bottom: 0;        /* full height, over the navbar */
      z-index: 1600;                       /* above .app-header (1400) */
      background: #fff;
      border-radius: 0;                    /* square corners (companion style) */
      box-shadow: -4px 0 20px rgba(0,0,0,0.12);
      pointer-events: none;
      transform: translateX(calc(100% + 50px));
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      display: flex; flex-direction: column;
    }
    /* Consistent slide-panel width across the whole app (details, AI chat,
       account). The details panel still widens via its .expanded modifier. */
    :root { --t2d-panel-w: min(620px, 96vw); }
    .pd-details-panel,
    .pd-ai-chat-panel,
    .t2d-account-panel { width: var(--t2d-panel-w); }

    .pd-details-panel.active,
    .pd-ai-chat-panel.active,
    .t2d-account-panel.active {
      transform: translateX(0);
      pointer-events: auto;
    }

    /* Document preview/details must sit ABOVE the companion (1600) so a citation
       click overlays the chat instead of opening behind it. */
    .pd-details-panel { z-index: 1610; }
    .pd-details-backdrop { z-index: 1605; }

    .pd-details-backdrop,
    .pd-ai-chat-backdrop,
    .t2d-account-backdrop {
      z-index: 1599;
      pointer-events: none;
    }
    .pd-details-backdrop.active,
    .pd-ai-chat-backdrop.active,
    .t2d-account-backdrop.active {
      pointer-events: auto;
    }

    /* AI model settings — right slide panel (consistent with the others),
       slides OVER the companion chat panel (z above 1600). */
    .t2d-ai-settings-panel {
      position: fixed; top: 0; right: 0; bottom: 0;
      z-index: 1620;
      width: min(400px, 92vw);
      background: #fff;
      box-shadow: -4px 0 20px rgba(0,0,0,0.14);
      pointer-events: none;
      transform: translateX(calc(100% + 50px));
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      display: flex; flex-direction: column;
    }
    .t2d-ai-settings-panel.active { transform: translateX(0); pointer-events: auto; }
    .t2d-ai-settings-backdrop {
      position: fixed; inset: 0; z-index: 1619;
      background: rgba(20, 40, 60, 0.25);
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .t2d-ai-settings-backdrop.active { opacity: 1; pointer-events: auto; }
    .t2d-ai-settings-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px; color: #fff; flex-shrink: 0;
      background: linear-gradient(135deg, #4682b4, #2e4d6f);
      font-family: var(--font-heading, Montserrat, sans-serif);
      font-size: 0.9rem; font-weight: 600;
    }
    .t2d-ai-settings-header .pd-btn-icon { color: #fff; background: rgba(255,255,255,0.15); }
    .t2d-ai-settings-body { padding: 16px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
    .t2d-ai-settings-footer {
      display: flex; justify-content: flex-end; gap: 8px;
      padding: 12px 16px; border-top: 1px solid rgba(70,130,180,0.15); flex-shrink: 0;
    }
    /* Account panel: header matches the AI panel; iframe fills the body */
    .t2d-account-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 10px 14px; color: #fff; flex-shrink: 0;
      background: linear-gradient(135deg, #4682b4, #2e4d6f);
      font-family: var(--font-heading, Montserrat, sans-serif);
      font-size: 0.9rem; font-weight: 600;
    }
    .t2d-account-header .pd-btn-icon { color: #fff; background: rgba(255,255,255,0.15); }
    .t2d-account-frame { flex: 1; width: 100%; border: 0; background: #fff; }
    /* Profile panel body */
    .t2d-profile-body { padding: 24px 20px; text-align: center; overflow-y: auto; }
    .avatar-big {
      width: 72px; height: 72px; border-radius: 50%; margin: 4px auto 14px;
      display: flex; align-items: center; justify-content: center;
      background: linear-gradient(135deg, #4682b4, #2c5171); color: #fff;
      font-family: var(--font-heading, Montserrat, sans-serif);
      font-weight: 700; font-size: 1.6rem; text-transform: uppercase;
    }
    .t2d-profile-name { margin: 0 0 2px; font-size: 0.95rem; font-weight: 600; color: #2c5171; }
    .t2d-profile-email { margin: 0 0 20px; font-size: 0.8rem; color: var(--text-light, #777); word-break: break-all; }
    .t2d-profile-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 10px; }

    /* ─── Tier chip (navbar) + tier badge / credits section (profile panel) ─── */
    .header-tier-chip {
      display: inline-flex; align-items: center; justify-content: center;
      height: 24px; padding: 0 10px; border: 0; border-radius: 999px;
      font-family: var(--font-brand, 'Raleway', 'Inter', sans-serif);
      font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px;
      line-height: 1; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.18);
      transition: filter 0.15s ease;
    }
    .header-tier-chip:hover { filter: brightness(1.08); }
    .tier-badge {
      display: inline-block; padding: 3px 12px; border-radius: 999px;
      font-family: var(--font-brand, 'Raleway', 'Inter', sans-serif);
      font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; line-height: 1;
    }
    .tier-basic      { background: #e5e7eb; color: #4b5563; }
    .tier-pro        { background: linear-gradient(135deg, #ff8c3c, #e2680c); color: #fff; }
    .tier-enterprise { background: linear-gradient(135deg, #d4af37, #a6841a); color: #fff; }

    .t2d-tier-section {
      width: 100%; margin: 4px 0 16px; padding: 14px; border-radius: 14px;
      background: rgba(70,130,180,0.06); border: 1px solid rgba(70,130,180,0.18);
      text-align: left;
    }
    .t2d-tier-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .t2d-tier-row .t2d-tier-label { font-size: 12px; color: #577793; font-weight: 600; }
    .t2d-tier-credits { margin: 12px 0 0; }
    .t2d-credit-row { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #475569; }
    .t2d-credit-label { font-weight: 600; white-space: nowrap; }
    .t2d-credit-bar { flex: 1; height: 4px; background: #e2e8f0; border-radius: 2px; overflow: hidden; }
    .t2d-credit-bar-fill { height: 100%; background: linear-gradient(90deg,#10b981,#059669); border-radius: 2px; transition: width 0.3s ease; }
    .t2d-credit-bar-fill.warn { background: linear-gradient(90deg,#f59e0b,#d97706); }
    .t2d-credit-bar-fill.exhausted { background: linear-gradient(90deg,#dc2626,#991b1b); }
    .t2d-credit-val { font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 11px; color: #334155; white-space: nowrap; }
    .t2d-tier-actions-title { margin: 14px 0 6px; font-size: 11px; font-weight: 600; color: #577793; text-transform: uppercase; letter-spacing: 0.4px; }
    .t2d-tier-actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
    .t2d-tier-actions li { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #475569; line-height: 1.3; }
    .t2d-tier-actions li i { color: var(--primary-color, #4682b4); font-size: 14px; flex-shrink: 0; }
    .t2d-tier-actions li > span:not(.t2d-action-cost) { flex: 1; }
    .t2d-action-cost {
      flex-shrink: 0; margin-left: auto;
      background: rgba(70,130,180,0.12); color: #2c5171;
      font-family: var(--font-mono, 'JetBrains Mono', monospace);
      font-size: 10px; font-weight: 600; line-height: 1;
      padding: 3px 7px; border-radius: 999px; white-space: nowrap;
    }

    /* pibiBridge pairing code (profile panel) */
    .t2d-bridge-code { margin: 8px 0 4px; }
    .t2d-bridge-hint { margin: 0 0 6px; font-size: 11px; color: var(--text-light, #777); line-height: 1.3; }
    .t2d-bridge-code-value {
      font-family: var(--font-mono, 'JetBrains Mono', monospace);
      font-size: 22px; font-weight: 700; letter-spacing: 3px; color: #2c5171;
      background: rgba(70,130,180,0.10); border-radius: 10px;
      padding: 10px; user-select: all;
    }

    /* Curtain (AI assistant via slide_panel_frappe.js): dynamically created div.
       slide_panel_frappe.js animates `right` to show/hide — we do NOT touch right or transform.
       Our JS (_applyCurtainStyle) sets top/bottom/z-index/background/blur via setProperty important. */
    body > div:has(> .pd-curtain-header) {
      overflow: hidden;
      background: #fff;
      pointer-events: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    body > div.curtain-open:has(> .pd-curtain-header) {
      pointer-events: auto;
    }

    /* ─── AI curtain panel: pibiCo glass styling ─── */
    .pd-curtain-header {
      background: var(--primary-color, #4682b4) !important;
      color: white !important;
      padding: 10px 14px !important;
      font-family: var(--font-heading, Montserrat, sans-serif) !important;
      font-size: 0.9rem !important;
      font-weight: 600 !important;
      display: flex; align-items: center; gap: 8px;
      border-radius: 0 !important;
    }
    .pd-curtain-header .pd-curtain-title { flex: 1; }
    .pd-curtain-header button {
      background: rgba(255,255,255,0.15) !important;
      border: none !important;
      color: white !important;
      border-radius: 6px !important;
      width: 28px; height: 28px;
      cursor: pointer;
    }
    .pd-curtain-header button:hover { background: rgba(255,255,255,0.25) !important; }

    /* Chat content area inside curtain */
    .pd-curtain-iframe,
    body > div:has(> .pd-curtain-header) > div:not(.pd-curtain-header) {
      background: var(--glass-bg, rgba(255,255,255,0.95));
      font-family: var(--font-body, Inter, sans-serif);
    }

    /* Fix pibiCo icon path fallback */
    img[src*="pibico_icon.svg"] {
      width: 28px; height: 28px; border-radius: 50%;
    }

    /* ─── Toolbar: single row, search grows full width ─── */
    .pd-toolbar {
      display: flex !important;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
      padding: 6px 12px;
      /* pd_drive.css sets space-between which centres the search with a big gap
         on its left — pack everything from the left instead. */
      justify-content: flex-start !important;
    }
    /* toolbar-left is empty in reader mode → don't reserve space */
    .pd-toolbar-left:empty { display: none; }
    /* search area takes the whole remaining width and starts at the far left
       (pd_drive.css caps it at max-width:400px + justify-content:flex-end). */
    .pd-toolbar-right {
      display: flex !important;
      align-items: center;
      flex: 1 1 auto;
      min-width: 0;
      margin-left: 0;
      max-width: none !important;
      justify-content: flex-start !important;
    }
    /* keep the view/sort controls pinned to the right edge */
    .pd-view-controls { margin-left: auto; flex: 0 0 auto; }
    .pd-toolbar-right .pd-search-container {
      display: flex !important;
      flex-direction: row !important;   /* pd_drive.css sets column — override */
      align-items: center;
      gap: 10px;
      width: 100%;
      max-width: none !important;       /* pd_drive.css caps at 350px — override */
    }
    /* Extended checkbox + (when active) mode select stay inline, fixed width */
    .pd-toolbar-right .pd-search-options {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
      margin: 0;
    }
    .pd-search-content-toggle {
      display: flex;
      align-items: center;
      gap: 4px;
      font-size: 0.8rem;
      white-space: nowrap;
      cursor: pointer;
    }
    /* Search box grows full width; magnifier sits INSIDE the input */
    .pd-toolbar-right .pd-search-box {
      position: relative;
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
      display: block;
    }
    .pd-toolbar-right .pd-search-box .ph-magnifying-glass {
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      color: var(--text-light, #666);
      pointer-events: none;
    }
    .pd-toolbar-right .pd-search-box .pd-search-input {
      width: 100%;
      box-sizing: border-box;
      height: 34px;                 /* uniform control height */
      padding: 0 12px 0 32px;       /* room for the inset icon */
      border: 1px solid var(--glass-border, rgba(70,130,180,0.25));
      border-radius: var(--radius-sm, 8px);
      background: #fff;
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 0.85rem;
      line-height: 1.2;
    }
    .pd-toolbar-right .pd-search-box .pd-search-input:focus {
      outline: none;
      border-color: var(--primary-color, #4682b4);
      box-shadow: 0 0 0 3px rgba(70,130,180,0.12);
    }
    /* View controls (sort + grid/list) share the search line, pinned right */
    .pd-toolbar .pd-view-controls {
      display: flex;
      align-items: center;
      gap: 6px;
      flex: 0 0 auto;
    }
    .pd-toolbar .pd-view-toggle { display: flex; align-items: center; gap: 4px; }
    .pd-toolbar .pd-toolbar-divider {
      width: 1px; height: 20px; background: var(--glass-border, rgba(70,130,180,0.25));
    }
    /* Icon buttons: ALL exactly 34×34 square, 1px border, same look */
    .pd-btn-icon {
      width: 34px !important; height: 34px !important;
      min-width: 34px !important; min-height: 34px !important;
      max-width: 34px !important; max-height: 34px !important;
      padding: 0 !important; margin: 0;
      display: inline-flex !important; align-items: center; justify-content: center;
      box-sizing: border-box;
      border: 1px solid var(--glass-border, rgba(70,130,180,0.25)) !important;
      border-radius: var(--radius-sm, 8px) !important;
      background: #fff;
      color: var(--accent-color, #2c5171);
      cursor: pointer; flex: 0 0 auto;
      transition: background .15s, border-color .15s, color .15s;
    }
    .pd-btn-icon:hover {
      background: rgba(70,130,180,0.08);
      border-color: var(--primary-color, #4682b4);
    }
    /* Active view toggle (grid/list) reads as selected */
    .pd-btn-icon.active {
      background: var(--primary-color, #4682b4) !important;
      border-color: var(--primary-color, #4682b4) !important;
      color: #fff;
    }
    /* Uniform glyph size whether Phosphor <i> or inline SVG */
    .pd-btn-icon i[class*="ph-"] { font-size: 18px !important; line-height: 1; }
    .pd-btn-icon svg { width: 18px !important; height: 18px !important; }
    /* Read-only: keep mutation buttons hidden even though .pd-btn-icon forces
       display:inline-flex above (this rule comes later → wins). */
    .t2d-reader-hide, .pd-upload-trigger { display: none !important; }

    /* ─── Library tab header (title + sync) ─── */
    .t2d-lib-header { justify-content: space-between; padding: 4px 6px 6px; }
    .t2d-lib-sync.spinning i { animation: t2dspin 0.8s linear infinite; }
    @keyframes t2dspin { to { transform: rotate(360deg); } }

    /* ─── Library cards (replace the dropdown in the Bibliotecas tab) ─── */
    .t2d-lib-cards { display: flex; flex-direction: column; gap: 6px; padding: 4px; }
    .t2d-lib-card {
      position: relative;
      display: flex; align-items: center; gap: 10px; width: 100%;
      padding: 8px 34px 8px 10px; text-align: left; cursor: pointer;
      background: rgba(255,255,255,0.6);
      border: 1px solid var(--glass-border, rgba(70,130,180,0.18));
      border-radius: var(--radius, 12px);
      transition: background .15s, box-shadow .15s, border-color .15s;
      font-family: var(--font-body, 'Inter', sans-serif);
    }
    .t2d-lib-card:hover { background: #fff; box-shadow: 0 2px 10px rgba(44,81,113,0.10); }
    /* Floating "open source" button — jumps to the repository's web app */
    .t2d-lib-card-open {
      position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
      width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
      border-radius: 6px; color: var(--primary-color, #4682b4);
      background: rgba(70,130,180,0.10); text-decoration: none;
      opacity: 0; transition: opacity .15s, background .15s;
    }
    .t2d-lib-card:hover .t2d-lib-card-open,
    .t2d-lib-card.active .t2d-lib-card-open { opacity: 1; }
    .t2d-lib-card-open:hover { background: var(--primary-color, #4682b4); color: #fff; }
    .t2d-lib-card-open i { font-size: 13px; }
    /* Floating "AI tagging rules" button — opens the T2DTagRules slide panel.
       Same chip as -open, offset left of it (card right padding covers both). */
    .t2d-lib-card-rules {
      position: absolute; top: 50%; right: 34px; transform: translateY(-50%);
      width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
      border-radius: 6px; color: var(--primary-color, #4682b4);
      background: rgba(70,130,180,0.10); border: none; cursor: pointer; padding: 0;
      opacity: 0; transition: opacity .15s, background .15s;
    }
    .t2d-lib-card:hover .t2d-lib-card-rules,
    .t2d-lib-card.active .t2d-lib-card-rules { opacity: 1; }
    .t2d-lib-card-rules:hover { background: var(--primary-color, #4682b4); color: #fff; }
    .t2d-lib-card-rules i { font-size: 13px; }
    /* When the rules button is present the open icon needs more clearance */
    .t2d-lib-card:has(.t2d-lib-card-rules) { padding-right: 62px; }
    .t2d-lib-card.active {
      background: rgba(70,130,180,0.10);
      border-color: rgba(70,130,180,0.45);
      box-shadow: 0 2px 8px rgba(70,130,180,0.15);
    }
    .t2d-lib-card-ic { font-size: 20px; color: var(--primary-color, #4682b4); flex-shrink: 0; }
    .t2d-lib-card-body { display: flex; flex-direction: column; min-width: 0; }
    .t2d-lib-card-name {
      font-size: 0.86rem; font-weight: 600; color: var(--accent-color, #2c5171);
      line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .t2d-lib-card-meta { font-size: 0.7rem; color: var(--text-light, #666); line-height: 1.2; display: inline-flex; align-items: center; gap: 5px; }
    .t2d-lib-badge {
      font-size: 0.6rem; font-weight: 600; line-height: 1; padding: 2px 6px;
      border-radius: 6px; white-space: nowrap;
    }
    .t2d-lib-badge-ok  { background: rgba(16,185,129,0.14); color: #0f7a5a; }   /* backfill_all — completo */
    .t2d-lib-badge-new { background: rgba(70,130,180,0.16); color: #2c5171; }   /* from_now — nuevos */
    .t2d-lib-badge-off { background: rgba(148,163,184,0.22); color: #5a6478; }  /* no_index — sin indexar */
    .t2d-lib-empty { padding: 12px; font-size: 0.8rem; color: var(--text-light, #666); text-align: center; }

    /* Folder counts (cloud): square icon chips (folders=sky, files=slate) with a
       floating counter on the corner — same size for both. */
    .pd-folder-item { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; }
    .pd-folder-item .pd-folder-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pd-fcount {
      position: relative; flex-shrink: 0; box-sizing: border-box;
      display: inline-flex; align-items: center; justify-content: center;
      width: 22px; height: 22px; border-radius: 4px;   /* square */
      border: 1px solid var(--glass-border, rgba(70,130,180,0.25));
    }
    .pd-fcount i { font-size: 11px; line-height: 1; }
    .pd-fcount-folders { background: var(--sky-50, #EEF6FF); color: var(--sky-800, #1A4A7A); }
    .pd-fcount-files { background: var(--slate-50, #F0F2F5); color: var(--slate-800, #3A4050); }
    .pd-fcount-num {
      position: absolute; top: -6px; right: -6px;
      min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box;
      border-radius: 7px; background: var(--primary-color, #4682b4); color: #fff;
      font-size: 0.5rem; font-weight: 700; line-height: 14px; text-align: center;
      box-shadow: 0 0 0 1.5px #fff;
    }

    /* Every icon button gets a thin 1px delimiter border */
    .pd-btn-icon, .pd-btn.pd-btn-icon, button.pd-icon-btn, .pd-icon-button {
      border: 1px solid var(--glass-border, rgba(70,130,180,0.25)) !important;
    }

    /* Folders-tab title "open source" link */
    .pd-folder-list-header { display: flex; align-items: center; gap: 6px; }
    .t2d-folders-open {
      display: inline-flex; align-items: center; justify-content: center;
      width: 34px; height: 34px; min-width: 34px; box-sizing: border-box;
      border-radius: var(--radius-sm, 8px); flex-shrink: 0;
      color: var(--primary-color, #4682b4); background: #fff;
      text-decoration: none; border: 1px solid var(--glass-border, rgba(70,130,180,0.25));
      transition: background .15s, border-color .15s, color .15s;
    }
    .t2d-folders-open:hover { background: var(--primary-color, #4682b4); color: #fff; border-color: var(--primary-color, #4682b4); }
    .t2d-folders-open i { font-size: 18px; }

    /* ─── Folder browse slide panel (recursive tree) ─── */
    .t2d-tree-backdrop {
      position: fixed; inset: 0; background: rgba(20,40,60,0.18);
      opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 1599;
    }
    .t2d-tree-backdrop.open { opacity: 1; pointer-events: auto; }
    .t2d-tree-panel {
      position: fixed; top: 0; bottom: 0; right: 0; width: 380px; max-width: 92vw;
      background: #fff; border-radius: 0;          /* full height, over navbar, square */
      box-shadow: -4px 0 20px rgba(20,40,60,0.18);
      display: flex; flex-direction: column; overflow: hidden;
      transform: translateX(110%); transition: transform .25s ease; z-index: 1600;
    }
    .t2d-tree-panel.open { transform: translateX(0); }
    .t2d-tree-panel-head {
      display: flex; align-items: center; gap: 8px; padding: 12px 14px;
      background: var(--bg-gradient, linear-gradient(135deg,#2c5171,#4682b4,#6a9bc3));
      color: #fff; font-family: var(--font-heading, 'Montserrat', sans-serif); font-weight: 600;
    }
    .t2d-tree-panel-head .t2d-tree-title { flex: 1; font-size: 0.95rem; }
    .t2d-tree-close {
      width: 28px; height: 28px; border: none; border-radius: 6px; cursor: pointer;
      background: rgba(255,255,255,0.18); color: #fff; font-size: 18px; line-height: 1;
    }
    .t2d-tree-close:hover { background: rgba(255,255,255,0.30); }
    .t2d-tree-panel-body { flex: 1; overflow: auto; padding: 8px; }
    .t2d-tree-node-row {
      display: flex; align-items: center; gap: 4px; padding: 3px 6px;
      border-radius: 8px; cursor: default; line-height: 1;
    }
    .t2d-tree-node-row:hover { background: rgba(70,130,180,0.06); }
    .t2d-tree-caret {
      width: 16px; height: 16px; flex-shrink: 0; display: inline-flex;
      align-items: center; justify-content: center; cursor: pointer;
      color: var(--text-light, #666); border-radius: 4px; line-height: 1;
    }
    .t2d-tree-caret i { font-size: 13px; }
    .t2d-tree-caret.empty { visibility: hidden; }
    .t2d-tree-caret:hover { background: rgba(70,130,180,0.12); }
    .t2d-tree-name {
      flex: 1; min-width: 0; cursor: pointer; font-size: 0.82rem; line-height: 1;
      color: var(--accent-color, #2c5171); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      display: flex; align-items: center; gap: 6px;
    }
    .t2d-tree-name i { color: var(--primary-color, #4682b4); font-size: 14px; }
    .t2d-tree-children { margin-left: 12px; border-left: 1px solid rgba(70,130,180,0.12); padding-left: 4px; }
    .t2d-tree-empty, .t2d-tree-loading { padding: 10px; color: var(--text-light,#666); font-size: 0.82rem; text-align: center; }
    .t2d-tree-denied {
      display: flex; align-items: center; justify-content: center; gap: 5px;
      padding: 6px 10px; color: #9a6700; font-size: 0.78rem;
    }
    .t2d-tree-denied i { color: #c08a00; }

    /* Advanced search panel: single-column fields packed from the top, footer actions */
    .t2d-search-body { display: flex; flex-direction: column; align-content: flex-start; gap: 8px; padding: 12px; }
    .t2d-sf { display: flex; flex-direction: column; gap: 3px; font-size: 0.72rem; color: var(--text-light,#666); }
    .t2d-sf span { font-weight: 600; }
    .t2d-sf input, .t2d-sf select {
      width: 100%; box-sizing: border-box;
      padding: 6px 8px; border: 1px solid rgba(70,130,180,0.3); border-radius: var(--radius-sm,8px);
      font-size: 0.82rem; color: var(--text-color,#333); background: #fff; font-family: inherit;
    }
    .t2d-sf input:focus, .t2d-sf select:focus { outline: none; border-color: #4682b4; }
    .t2d-sf-hint { font-size: 0.68rem; color: var(--text-light,#888); margin-top: 2px; line-height: 1.2; }
    .t2d-sf-hint code { font-family: var(--font-mono,'JetBrains Mono',monospace); background: rgba(70,130,180,0.08); padding: 0 4px; border-radius: 3px; font-size: 0.92em; color: #2c5171; }
    .t2d-sf-check { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-color,#333); cursor: pointer; }
    /* Toggleable pill buttons — pibiCo's binary on/off control for slide-panel
       filters. NOT a checkbox: checkbox is reserved for multi-doc selection on
       the file grid + the master select-all in the toolbar. State lives in
       aria-pressed so screen readers announce it. */
    .t2d-sf-pills { display: flex; flex-wrap: wrap; gap: 6px; }
    .t2d-sf-pill {
      display: inline-flex; align-items: center; gap: 5px;
      padding: 4px 10px; border-radius: 999px;
      background: rgba(70,130,180,0.08);
      border: 1px solid rgba(70,130,180,0.25);
      color: var(--text-color,#333);
      font-size: 0.78rem; font-weight: 600;
      cursor: pointer; transition: background .15s, border-color .15s, color .15s;
    }
    .t2d-sf-pill i.ph { font-size: 14px; color: #4682b4; }
    .t2d-sf-pill:hover { background: rgba(70,130,180,0.15); border-color: #4682b4; }
    .t2d-sf-pill[aria-pressed="true"] {
      background: #4682b4; border-color: #4682b4; color: #fff;
    }
    .t2d-sf-pill[aria-pressed="true"] i.ph { color: #fff; }
    /* Task #15 — multi-select. The checkbox lives top-RIGHT of each thumbnail.
       Top-left is the ellipsis menu (.pd-doc-more-btn); top-right is the
       indicator stack (favorite/cloud/attachments/dup), but those overlays
       are only present conditionally and the checkbox only fades in on hover
       or while select mode / a selection is active — so the visual collision
       window is small and explicitly trades a transient overlay for the
       multi-select affordance the user expects in that corner. */
    .pd-doc-card { position: relative; }
    .t2d-card-pick {
      position: absolute; top: 8px; right: 8px; z-index: 10;
      width: 22px; height: 22px;
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer;
      opacity: 0; transition: opacity .15s;
    }
    .pd-doc-card:hover .t2d-card-pick,
    .pd-doc-card .t2d-card-pick-input:checked + .t2d-card-pick-box,
    body.t2d-select-mode .t2d-card-pick { opacity: 1; }
    .t2d-card-pick-input { position: absolute; opacity: 0; pointer-events: none; width: 22px; height: 22px; margin: 0; }
    .t2d-card-pick-box {
      display: block; width: 18px; height: 18px;
      background: #fff; border: 2px solid #4682b4; border-radius: 4px;
      box-shadow: 0 1px 3px rgba(0,0,0,.18);
      transition: background .12s, border-color .12s;
    }
    .t2d-card-pick-input:checked + .t2d-card-pick-box {
      background: #4682b4; border-color: #4682b4; opacity: 1;
    }
    .t2d-card-pick-input:checked + .t2d-card-pick-box::after {
      content: ""; position: absolute; left: 12px; top: 9px;
      width: 4px; height: 9px;
      border: solid #fff; border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }
    /* Row variant (adv-search results) — sits before the row content, not absolute. */
    .t2d-card-pick--row {
      position: static; opacity: 1;
      margin-right: 6px;
    }
    .t2d-card-pick--row .t2d-card-pick-input { position: static; opacity: 1; pointer-events: auto; }
    /* Mixed-state toolbar pill (some but not all selected). */
    #t2d-select-all-toggle.is-partial {
      background: rgba(70,130,180,0.35);
      border-color: #4682b4; color: #fff;
    }
    #t2d-select-all-toggle.is-partial i.ph { color: #fff; }
    /* Floating selection bar — only shown when count > 0. */
    .t2d-multi-bar {
      position: fixed; left: 50%; bottom: 48px; transform: translate(-50%, 24px);
      display: none; align-items: center; gap: 12px;
      padding: 8px 14px; border-radius: 999px;
      background: #fff; box-shadow: 0 8px 24px rgba(70,130,180,.28), 0 2px 6px rgba(0,0,0,.08);
      border: 1px solid rgba(70,130,180,0.25);
      z-index: 1050;
      font-size: 0.85rem; color: #233a4f;
      opacity: 0; transition: opacity .18s, transform .18s;
    }
    .t2d-multi-bar.is-visible {
      display: inline-flex; opacity: 1;
      transform: translate(-50%, 0);
    }
    .t2d-multi-count { font-weight: 600; color: #4682b4; }
    .t2d-multi-btn {
      display: inline-flex; align-items: center; gap: 6px;
      padding: 5px 12px; border-radius: 999px; border: 1px solid transparent;
      cursor: pointer; font-size: 0.82rem; font-weight: 600;
      background: rgba(70,130,180,.08); color: #4682b4;
      transition: background .15s, color .15s;
    }
    .t2d-multi-btn:hover { background: rgba(70,130,180,.18); }
    .t2d-multi-btn.t2d-multi-download {
      background: #4682b4; color: #fff;
    }
    .t2d-multi-btn.t2d-multi-download:hover { background: #355d82; }
    .t2d-multi-btn:disabled { opacity: 0.6; cursor: progress; }
    .t2d-multi-btn i.ph { font-size: 14px; }
    /* Cascade type tree (replaces the single Tipo dropdown). */
    .t2d-sf-block { gap: 4px; }
    /* Pair size min/max and date from/to side-by-side to cut vertical scroll. */
    .t2d-sf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .t2d-sf-grid2 > .t2d-sf { min-width: 0; }
    .t2d-sf-types {
      border: 1px solid rgba(70,130,180,0.25); border-radius: var(--radius-sm,8px);
      background: #fff; max-height: 230px; overflow-y: auto; padding: 2px;
    }
    .t2d-sf-types input[type="checkbox"] { width: auto; box-sizing: content-box; margin: 0; cursor: pointer; flex-shrink: 0; }
    .t2d-sft-head {
      display: flex; align-items: center; gap: 6px; padding: 3px 6px;
      border-radius: var(--radius-sm,8px); color: var(--text-color,#333); font-size: 0.8rem;
    }
    .t2d-sft-head:hover { background: rgba(70,130,180,0.06); }
    .t2d-sft-toggle {
      width: 18px; height: 18px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      border: none; background: none; padding: 0; cursor: pointer; color: var(--text-light,#888);
    }
    .t2d-sft-toggle i { font-size: 0.85rem; }
    .t2d-sft-icon { color: var(--primary-color,#4682b4); font-size: 0.95rem; flex-shrink: 0; }
    .t2d-sft-name { font-weight: 600; }
    .t2d-sft-exts { padding: 1px 6px 4px 36px; display: flex; flex-direction: column; gap: 1px; }
    /* The author `display:flex` above outranks the UA [hidden] rule, so the
       collapse never took effect — restore it with attribute-level specificity. */
    .t2d-sft-exts[hidden] { display: none; }
    .t2d-sft-ext-row {
      display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 6px;
      font-size: 0.76rem; color: var(--text-color,#333); cursor: pointer;
    }
    .t2d-sft-ext-row:hover { background: rgba(70,130,180,0.06); }
    .t2d-search-footer {
      display: flex; justify-content: flex-end; gap: 8px;
      padding: 10px 12px; border-top: 1px solid rgba(70,130,180,0.15); flex-shrink: 0;
    }
    /* Advanced-search mode selector (radios + explanation) */
    .t2d-sf-modes { display: flex; flex-direction: column; gap: 4px; }
    .t2d-sf-mode { display: flex; align-items: flex-start; gap: 7px; padding: 6px 8px; border: 1px solid rgba(70,130,180,0.16);
      border-radius: var(--radius-sm,8px); cursor: pointer; background: rgba(255,255,255,0.5); }
    .t2d-sf-mode:hover { background: rgba(70,130,180,0.07); }
    .t2d-sf-mode input { margin-top: 2px; width: auto; flex-shrink: 0; cursor: pointer; }
    .t2d-sf-mode-t { display: flex; flex-direction: column; gap: 1px; }
    .t2d-sf-mode-t b { font-size: 0.8rem; color: #1a3a54; font-weight: 600; }
    .t2d-sf-mode-t small { font-size: 0.68rem; color: var(--text-light,#777); line-height: 1.25; }
    /* In-panel results list (click a row → opens in the files/details card) */
    .t2d-sf-results { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
    .t2d-sf-rhead { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #94a3b8; padding: 4px 0 2px; }
    /* Sticky pager — sits at the bottom of the scrollable body so users always
       see "página N / M" + prev/next without scrolling down past 25+ rows. */
    .t2d-sf-pager {
      position: sticky; bottom: -12px;  /* counter the body padding so it hugs the edge */
      margin: 6px -12px -12px;
      padding: 8px 12px;
      background: rgba(255,255,255,0.96);
      backdrop-filter: blur(6px);
      border-top: 1px solid rgba(70,130,180,0.15);
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      font-size: 0.78rem; color: var(--text-color,#333);
      z-index: 2;
    }
    .t2d-sf-pager-size { display: flex; align-items: center; gap: 6px; }
    .t2d-sf-pager-size select {
      padding: 2px 6px; border: 1px solid rgba(70,130,180,0.25); border-radius: 6px;
      background: #fff; font-size: 0.78rem; cursor: pointer;
    }
    .t2d-sf-pager-nav { display: inline-flex; align-items: center; gap: 8px; }
    .t2d-sf-pager-nav button {
      width: 26px; height: 26px; border-radius: 50%;
      border: 1px solid rgba(70,130,180,0.25); background: #fff; cursor: pointer;
      font-size: 1rem; line-height: 1; color: #4682b4;
      display: inline-flex; align-items: center; justify-content: center;
    }
    .t2d-sf-pager-nav button:hover:not(:disabled) { background: rgba(70,130,180,0.10); border-color: #4682b4; }
    .t2d-sf-pager-nav button:disabled { opacity: 0.4; cursor: default; }
    .t2d-sf-pager-page { font-weight: 600; color: #4682b4; min-width: 70px; text-align: center; }
    .t2d-sf-rrow { display: flex; align-items: center; gap: 7px; width: 100%; text-align: left; padding: 6px 8px; border: none;
      border-radius: var(--radius-sm,8px); background: rgba(255,255,255,0.55); cursor: pointer; color: var(--text-color,#333); }
    .t2d-sf-rrow:hover { background: rgba(70,130,180,0.10); }
    .t2d-sf-rrow > i { color: #4682b4; flex-shrink: 0; }
    .t2d-sf-rtext { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
    .t2d-sf-rtext b { font-size: 0.78rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .t2d-sf-rtext small { font-size: 0.68rem; color: var(--text-light,#777); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .t2d-sf-score { flex-shrink: 0; font-size: 0.66rem; font-weight: 600; color: #2c5171; background: rgba(70,130,180,0.12); padding: 1px 6px; border-radius: 9px; }
    .t2d-sf-empty { font-size: 0.76rem; color: var(--text-light,#777); padding: 8px 4px; }
    /* Advanced search panel = same width as the preview/details panel; sits just
       UNDER it so opening a result's preview covers it, and closing the preview
       reveals the search panel (with its results) again. */
    /* Base slide-panel chrome for the advanced search — same family as
       pd-details-panel / pd-ai-chat-panel / t2d-account-panel (line ~141),
       declared here so the search panel is self-contained. */
    .t2d-search-panel {
      position: fixed; top: 0; right: 0; bottom: 0;
      z-index: 1590;
      width: var(--t2d-panel-w, min(620px, 96vw));
      background: #fff;
      box-shadow: -4px 0 20px rgba(0,0,0,0.12);
      pointer-events: none;
      transform: translateX(calc(100% + 50px));
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex; flex-direction: column;
    }
    .t2d-search-panel.active { transform: translateX(0); pointer-events: auto; }
    .t2d-search-head {
      display: flex; align-items: center; justify-content: space-between;
      padding: 12px 14px; background: linear-gradient(135deg, #4682b4, #2e4d6f);
      color: #fff; flex-shrink: 0;
    }
    .t2d-search-head h3 {
      margin: 0; font-family: var(--font-heading, Montserrat, sans-serif);
      font-size: 0.95rem; font-weight: 600; line-height: 1;
    }
    .t2d-search-close {
      width: 28px; height: 28px; border: none; border-radius: 6px;
      background: rgba(255,255,255,0.18); color: #fff; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .t2d-search-close:hover { background: rgba(255,255,255,0.30); }
    .t2d-search-close i { font-size: 16px; }
    .t2d-search-body { flex: 1; overflow-y: auto; }
    #t2dSearchBackdrop {
      position: fixed; inset: 0; z-index: 1589;
      background: rgba(20, 40, 60, 0.25);
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    #t2dSearchBackdrop.active { opacity: 1; pointer-events: auto; }
    /* Help panel — same .t2d-search-panel chrome; only the body styling +
       a dedicated backdrop are new. (Task #14.) */
    #t2dHelpBackdrop {
      position: fixed; inset: 0; z-index: 1589;
      background: rgba(20, 40, 60, 0.25);
      opacity: 0; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    #t2dHelpBackdrop.active { opacity: 1; pointer-events: auto; }
    .t2d-help-body { padding: 14px 16px 24px; color: #233a4f; }
    .t2d-help-intro {
      margin: 0 0 12px; font-size: 0.93rem; line-height: 1.45;
      color: #355d82;
    }
    .t2d-help-downloads {
      display: flex; flex-direction: column; gap: 8px;
      margin: 0 0 18px;
    }
    .t2d-help-dl {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 9px 14px; border-radius: 8px;
      text-decoration: none; font-weight: 600; font-size: 0.88rem;
      border: 1px solid rgba(70,130,180,0.25);
      color: #355d82; background: rgba(70,130,180,0.06);
      transition: background .15s, border-color .15s, color .15s;
    }
    .t2d-help-dl:hover { background: rgba(70,130,180,0.15); border-color: #4682b4; }
    .t2d-help-dl.pd-btn-primary {
      background: #4682b4; color: #fff; border-color: #4682b4;
    }
    .t2d-help-dl.pd-btn-primary:hover { background: #355d82; border-color: #355d82; }
    .t2d-help-dl i.ph { font-size: 18px; }
    /* View-in-tab row — lighter affordance below the downloads. */
    .t2d-help-views {
      display: flex; flex-direction: column; gap: 4px;
      margin-top: 6px; padding-top: 8px;
      border-top: 1px dashed rgba(70,130,180,0.20);
    }
    .t2d-help-view {
      display: inline-flex; align-items: center; gap: 6px;
      font-size: 0.82rem; color: #4682b4; text-decoration: none;
      padding: 4px 0;
    }
    .t2d-help-view:hover { color: #355d82; text-decoration: underline; }
    .t2d-help-view i.ph { font-size: 15px; }
    .t2d-help-body h4 {
      margin: 12px 0 6px; font-size: 0.84rem;
      text-transform: uppercase; letter-spacing: 0.5px;
      color: #4682b4; font-weight: 600;
    }
    .t2d-help-list {
      list-style: none; padding: 0; margin: 0 0 12px;
      display: flex; flex-direction: column; gap: 6px;
      font-size: 0.84rem; line-height: 1.45;
    }
    .t2d-help-list li { padding-left: 2px; }
    .t2d-help-list strong { color: #355d82; }
    .t2d-help-list kbd {
      display: inline-block; padding: 0 5px;
      border: 1px solid #c6d5e0; border-radius: 3px;
      background: #fff; color: #355d82;
      font-family: "JetBrains Mono", monospace;
      font-size: 0.78rem;
      box-shadow: 0 1px 0 #c6d5e0;
    }
    .t2d-help-list code {
      background: #eef4f8; color: #355d82;
      padding: 1px 4px; border-radius: 3px;
      font-family: "JetBrains Mono", monospace;
      font-size: 0.78rem;
    }
    .t2d-help-foot {
      margin: 16px 0 0; padding: 10px 12px;
      background: #f3f8fb; border-left: 3px solid #4682b4;
      font-size: 0.82rem; color: #355d82; line-height: 1.45;
    }
    /* Chip family inside the panel — reuse the Búsqueda-tab styles. */
    .t2d-search-panel .t2d-srch-chips, .t2d-search-panel .t2d-srch-tags {
      display: flex; flex-wrap: wrap; gap: 4px;
    }
    .t2d-search-panel .t2d-srch-key {
      font-size: 9.5px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.04em; color: var(--text-light, #666);
      margin: 4px 0 3px; line-height: 1;
    }
    .t2d-search-panel .t2d-srch-empty {
      font-size: 10.5px; color: var(--text-light, #666);
      font-style: italic; padding: 4px 0;
    }
    .t2d-search-panel .t2d-srch-group { margin-bottom: 6px; }
    /* Active-search chip lives in pd_drive.css now (shared with the
       Búsqueda finger tab); the prior inline duplicate was overridden by
       the .pd-path-bar button glass rule above and produced no visible
       fill. Keep the rule in one place so future tweaks don't drift. */
    /* One row per DOCUMENT (summary + chunks collapse under floating buttons). */
    .t2d-sf-rrow-wrap { display: flex; flex-direction: column; }
    .t2d-sf-rtop { position: relative; }
    /* Row reserves right padding so the floating action buttons never overlap text. */
    .t2d-sf-rtop .t2d-sf-rrow { width: 100%; padding-right: 52px; }
    /* Small floating action buttons (resumen / fragmentos), inside the row's right edge —
       sized to match the app's other compact icon buttons. */
    .t2d-sf-ractions {
      position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
      display: flex; align-items: center; gap: 3px; z-index: 2;
    }
    .t2d-sf-rbtn {
      width: 20px; height: 20px; border: none; background: rgba(70,130,180,0.10);
      border-radius: 6px; cursor: pointer; color: #2c5171; display: flex;
      align-items: center; justify-content: center; padding: 0;
    }
    .t2d-sf-rbtn:hover { background: rgba(70,130,180,0.22); }
    .t2d-sf-rbtn i { font-size: 13px; line-height: 1; }
    .t2d-sf-chunkbadge { flex-shrink: 0; font-size: 0.6rem; font-weight: 600; color: #2c5171; background: rgba(70,130,180,0.12); padding: 0 5px; border-radius: 8px; }
    /* Collapsible markdown blocks (summary + fragments). */
    .t2d-sf-rmd { padding: 3px 8px 3px 28px; display: flex; flex-direction: column; gap: 3px; }
    .t2d-sf-rmd[hidden] { display: none; }
    .t2d-sf-rsummary { font-size: 0.7rem; color: #475569; line-height: 1; background: rgba(70,130,180,0.05); border-radius: 6px; padding: 3px 8px; }
    .t2d-sf-chunk { font-size: 0.68rem; color: #64748b; line-height: 1; border-left: 2px solid rgba(70,130,180,0.25); padding: 0 0 0 6px; }
    /* renderMarkdown sets INLINE styles → !important keeps these compact. */
    .t2d-sf-rsummary :is(h1,h2,h3,h4,p,ul,ol,table,pre,blockquote), .t2d-sf-chunk :is(h1,h2,h3,h4,p,ul,ol,table,pre,blockquote) { margin: 1px 0 !important; line-height: 1.05 !important; }
    .t2d-sf-rsummary li, .t2d-sf-chunk li { margin: 0 !important; line-height: 1.05 !important; }
    .t2d-sf-rsummary :is(h1,h2,h3), .t2d-sf-chunk :is(h1,h2,h3) { font-size: 0.74rem !important; }
    .t2d-sf-rsummary :is(p,li,span,td,th), .t2d-sf-chunk :is(p,li,span,td,th) { font-size: 0.68rem !important; }
    /* Relevance slider row. */
    .t2d-sf-range { width: 100%; accent-color: #4682b4; cursor: pointer; }
    .t2d-sf-hint { font-size: 0.62rem; color: #94a3b8; font-weight: 400; }
    /* Tag / facet picker chips. */
    .t2d-sf-facets { display: flex; flex-direction: column; gap: 6px; max-height: 30vh; overflow: auto; }
    .t2d-sf-fgroup { display: flex; flex-direction: column; gap: 3px; }
    .t2d-sf-fglabel { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #94a3b8; }
    .t2d-sf-fchips { display: flex; flex-wrap: wrap; gap: 4px; }
    .t2d-sf-fchip { font-size: 0.66rem; line-height: 1; color: #2c5171; background: rgba(70,130,180,0.10);
      border: 1px solid transparent; border-radius: 10px; padding: 3px 8px; cursor: pointer;
      display: inline-flex; align-items: center; gap: 4px; font-family: inherit; }
    .t2d-sf-fchip:hover { background: rgba(70,130,180,0.18); }
    .t2d-sf-fchip.selected { background: var(--primary-color,#4682b4); color: #fff; border-color: var(--accent-color,#2c5171); }
    .t2d-sf-fchip.selected .t2d-sf-fcount { color: #e8f0f8; }
    .t2d-sf-fcount { font-size: 0.58rem; opacity: 0.7; }
    .t2d-sf-fchip-tag i { font-size: 11px; opacity: 0.7; }
    .t2d-sf-fsearch { font-size: 0.66rem; line-height: 1.1; padding: 3px 8px; border: 1px solid rgba(70,130,180,0.25);
      border-radius: 8px; background: #fff; color: #2c5171; outline: none; width: 100%; margin-bottom: 2px; }
    .t2d-sf-fsearch:focus { border-color: var(--primary-color,#4682b4); }
    .t2d-sf-fmore { font-size: 0.58rem; color: #94a3b8; align-self: center; padding: 0 4px; }
    button.t2d-cf-chip { cursor: pointer; border: none; font-family: inherit; }
    button.t2d-cf-chip:hover { background: rgba(70,130,180,0.2); }
    /* Search-status bar above the results grid (running / finished) */
    .t2d-search-status {
      display: flex; align-items: center; gap: 8px;
      padding: 5px 10px; margin: 0 0 8px; border-radius: var(--radius-sm,8px);
      background: rgba(70,130,180,0.10); color: #2c5171; font-size: 0.8rem; line-height: 1.2;
    }
    .t2d-search-status .t2d-ss-text { flex: 1; display: flex; align-items: center; gap: 6px; overflow: hidden; text-overflow: ellipsis; }
    .t2d-search-status .t2d-ss-clear {
      border: none; background: none; cursor: pointer; color: var(--text-light,#666);
      font-size: 1.1rem; line-height: 1; padding: 0 4px; flex-shrink: 0;
    }
    .t2d-search-status .t2d-ss-clear:hover { color: #ef4444; }
    .t2d-search-status .t2d-ss-clear.t2d-ss-stop {
      font-size: 0.72rem; font-weight: 600; padding: 3px 10px; border-radius: 10px;
      background: rgba(70,130,180,0.15); color: #2c5171;
    }
    .t2d-search-status .t2d-ss-clear.t2d-ss-stop:hover { background: rgba(239,68,68,0.15); color: #ef4444; }
    .t2d-spin { display: inline-block; animation: t2dspin 0.9s linear infinite; }
    @keyframes t2dspin { to { transform: rotate(360deg); } }
    /* Search-result card: relative path under the name */
    .pd-doc-path {
      display: flex; align-items: center; gap: 4px; font-size: 0.68rem; color: var(--text-light,#94a3b8);
      line-height: 1.2; margin: 1px 0 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .pd-doc-path i { font-size: 0.8em; flex-shrink: 0; }

    /* Primary action (upload) keeps its filled look but the uniform height */
    .pd-btn-icon.pd-btn-primary {
      background: var(--primary-color, #4682b4);
      border-color: var(--primary-color, #4682b4);
      color: #fff;
    }

    /* ─── Control-height parity: path input matches the 34px icon buttons ─── */
    .pd-path-input-container {
      height: 34px !important;
      border-radius: var(--radius-sm, 8px) !important;
      border: 1px solid var(--glass-border, rgba(70,130,180,0.25)) !important;
    }

    /* ─── Kill native button chrome on the AI companion buttons ───
       (these rendered with the browser default 2px outset / 32px size). */
    .pd-ai-hint-btn {
      border: 1px solid var(--glass-border, rgba(70,130,180,0.25)) !important;
      border-radius: var(--radius-sm, 8px) !important;
      background: rgba(70,130,180,0.06);
      color: var(--accent-color, #2c5171);
      padding: 4px 10px; font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 0.78rem; line-height: 1.2; cursor: pointer;
    }
    .pd-ai-hint-btn:hover { background: rgba(70,130,180,0.14); }
    .pd-ai-chat-btn {
      width: 34px !important; height: 34px !important;
      min-width: 34px !important; box-sizing: border-box;
      display: inline-flex !important; align-items: center; justify-content: center;
      border: 1px solid var(--glass-border, rgba(70,130,180,0.25)) !important;
      border-radius: var(--radius-sm, 8px) !important;
      background: #fff; color: var(--accent-color, #2c5171); cursor: pointer;
    }
    .pd-ai-chat-btn:hover { background: rgba(70,130,180,0.08); border-color: var(--primary-color, #4682b4); }

    /* ─── Hide AI/help affordances for non-indexed (connect-only) libraries ───
       Applied by event_manager.js (_applyNoIndexAffordances) on load and on every
       pd-workspace-changed when the active library has index_mode === 'no_index'.
       AI chat / assistant hints / extended help don't work without an index, so
       they're suppressed. Additive + reversible: the class only adds display:none,
       so removing it restores whatever display the element's own logic (auth gate,
       cloud-lib hide, born-hidden stub) would otherwise apply. */
    .t2d-noindex-hidden { display: none !important; }

    /* ─── Navbar icon buttons: thin 1px delimiter (match the body controls) ─── */
    .app-header-btn {
      border: 1px solid var(--glass-border, rgba(70,130,180,0.30)) !important;
    }
    /* Panel close buttons (About + AI curtain) over coloured headers */
    #btn-close-about,
    #pd-fullpage-curtain, #pd-expand-curtain, #pd-close-curtain {
      border: 1px solid rgba(255,255,255,0.35) !important;
    }
    /* Footer "Acerca de" — give it the same 1px delimiter (drive page only) */
    .app-footer .footer-link-btn {
      border: 1px solid rgba(255,255,255,0.30) !important;
      border-radius: var(--radius-sm, 8px);
      padding: 2px 8px; text-decoration: none;
    }

    /* ─── VISIBLE delimiter ───
       --glass-border resolves to semi-transparent WHITE (rgba(255,255,255,0.3)),
       so `border: 1px solid var(--glass-border)` is invisible on white cards.
       Force a steel-blue 1px line on every control that sits on a light surface. */
    .pd-btn-icon, .pd-btn.pd-btn-icon, button.pd-icon-btn, .pd-icon-button,
    .pd-path-input-container,
    .pd-toolbar-right .pd-search-box .pd-search-input,
    .t2d-folders-open, .pd-ai-chat-btn, .pd-ai-hint-btn,
    .t2d-lib-card, .pd-fcount, .app-header-btn {
      border-color: rgba(70,130,180,0.40) !important;
    }

    /* ─── Path bar: slim row; action buttons float INSIDE the path field ─── */
    .pd-path-bar { min-height: 38px !important; padding: 4px 10px !important; gap: 6px; }
    /* The sidebar toggle stays outside the field, compact */
    .pd-path-bar > .pd-sidebar-toggle.pd-btn-icon {
      width: 28px !important; height: 28px !important;
      min-width: 28px !important; min-height: 28px !important;
      max-width: 28px !important; max-height: 28px !important;
    }
    .pd-path-bar .pd-sidebar-toggle i[class*="ph-"] { font-size: 15px !important; }
    .pd-path-input-container { height: 30px !important; position: relative; padding-right: 4px; }
    /* go / tree relocated inside the field → floating, sized like the library
       card's floating open button (26×26, radius 7, icon 15). */
    .pd-path-input-container .pd-btn-icon {
      width: 22px !important; height: 22px !important;
      min-width: 22px !important; min-height: 22px !important;
      max-width: 22px !important; max-height: 22px !important;
      border: none !important; border-radius: 6px !important;
      background: rgba(70,130,180,0.10) !important;
      color: var(--primary-color, #4682b4);
    }
    .pd-path-input-container .pd-btn-icon:hover { background: var(--primary-color, #4682b4) !important; color: #fff !important; }
    .pd-path-input-container .pd-btn-icon i[class*="ph-"] { font-size: 13px !important; }

    /* ─── Details panel header actions (expand / pip / close) ─── */
    .pd-details-header { display: flex; align-items: center; justify-content: space-between; }
    .pd-details-header-actions { display: flex; align-items: center; gap: 6px; }
    /* Expanded width (companion-style wide viewer) */
    .pd-details-panel.expanded { width: min(900px, 94vw) !important; }

    /* ─── Cloud file preview (read-only) in the details panel ─── */
    .t2d-cloud-preview { padding: 12px 14px; overflow-y: auto; display: flex; flex-direction: column; }
    .t2d-cf-preview {
      width: 100%; height: 46vh; overflow: hidden;
      border: 1px solid rgba(70,130,180,0.25); border-radius: var(--radius, 12px);
      background: #fff; margin-bottom: 12px;
      display: flex; flex-direction: column;
    }
    .pd-details-panel.expanded .t2d-cf-preview { height: 74vh; }
    .t2d-cf-img { max-width: 100%; max-height: 100%; height: auto; margin: auto; object-fit: contain; }
    .t2d-cf-frame { width: 100%; height: 100%; flex: 1 1 auto; min-height: 0; border: 0; }
    /* Attachment download bar above the .eml iframe (native anchors so
       Chrome doesn't block downloads inside the sandboxed body iframe). */
    .t2d-eml-att-bar {
      flex: 0 0 auto;
      padding: 6px 10px; background: #eaf2fa;
      border-bottom: 1px solid rgba(70,130,180,0.18);
      font-size: 12px; line-height: 1.4;
      display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    }
    .t2d-eml-att-bar .t2d-eml-att-label { color: #2e4d6f; margin-right: 4px; }
    .t2d-eml-att-link {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 3px 8px; background: #fff;
      border: 1px solid rgba(70,130,180,0.30); border-radius: 6px;
      color: #2e4d6f; text-decoration: none; font-weight: 600;
      max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .t2d-eml-att-link:hover { background: #f4f8fc; border-color: #4682b4; color: #1a3a54; }
    .t2d-eml-att-link i.ph { font-size: 13px; color: #4682b4; }
    .t2d-eml-att-link .t2d-eml-att-size { color: #7a93b1; font-weight: 400; font-size: 11px; }
    .t2d-cf-pip-ph {
      flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
      gap: 10px; padding: 24px; color: var(--text-light, #94a3b8); font-size: 13px; text-align: center;
    }
    .t2d-cf-pip-ph i { font-size: 28px; }
    .t2d-cf-pre {
      margin: 0; padding: 10px 12px; width: 100%;
      /* JSON / raw-text preview shares .t2d-cf-preview's fixed-vh box with
         overflow:hidden — so the <pre> itself must claim the remaining
         flex height AND scroll internally. Without min-height:0 the flex
         child resolves to its natural content height (always greater than
         the parent), the parent clips, and there's no scrollbar at all
         for content past the viewport. Matches the .t2d-cf-md treatment
         a few rules below which already had overflow:auto. */
      flex: 1 1 auto; min-height: 0; overflow: auto;
      font-family: var(--font-mono, 'JetBrains Mono', monospace);
      font-size: 12px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
    }
    .t2d-cf-loading, .t2d-cf-noprev {
      margin: auto; color: var(--text-light, #666); font-size: 0.85rem;
      display: flex; align-items: center; gap: 6px; padding: 18px;
    }
    /* Rendered markdown preview (md_render.js output). */
    .t2d-cf-md {
      width: 100%; padding: 12px 16px; overflow: auto;
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 13px; line-height: 1.5; color: var(--text-color, #333);
      text-align: left;
    }
    .t2d-cf-md h1, .t2d-cf-md h2, .t2d-cf-md h3,
    .t2d-cf-md h4, .t2d-cf-md h5, .t2d-cf-md h6 {
      font-family: var(--font-heading, 'Montserrat', sans-serif);
      color: var(--accent-color, #2c5171); line-height: 1.25;
      margin: 14px 0 6px; font-weight: 600;
    }
    .t2d-cf-md h1 { font-size: 1.3rem; } .t2d-cf-md h2 { font-size: 1.15rem; }
    .t2d-cf-md h3 { font-size: 1.02rem; } .t2d-cf-md h4 { font-size: 0.92rem; }
    .t2d-cf-md p { margin: 6px 0; }
    .t2d-cf-md ul, .t2d-cf-md ol { margin: 6px 0; padding-left: 22px; }
    .t2d-cf-md li { margin: 2px 0; }
    .t2d-cf-md a { color: var(--primary-color, #4682b4); text-decoration: underline; }
    .t2d-cf-md code {
      font-family: var(--font-mono, 'JetBrains Mono', monospace); font-size: 0.85em;
      background: rgba(70,130,180,0.10); padding: 1px 5px; border-radius: 4px;
    }
    .t2d-cf-md pre.md-code {
      background: #1e293b; color: #e2e8f0; padding: 10px 12px;
      border-radius: var(--radius-sm, 8px); overflow: auto; margin: 8px 0;
    }
    .t2d-cf-md pre.md-code code { background: none; padding: 0; color: inherit; font-size: 12px; }
    .t2d-cf-md blockquote {
      margin: 8px 0; padding: 4px 12px; color: var(--text-light, #666);
      border-left: 3px solid rgba(70,130,180,0.4); background: rgba(70,130,180,0.05);
    }
    .t2d-cf-md hr { border: none; border-top: 1px solid rgba(0,0,0,0.1); margin: 12px 0; }
    /* Media (audio/video) — stream + seek via HTTP Range on the /file endpoint */
    .t2d-cf-media { max-width: 100%; }
    .t2d-cf-audio { width: 92%; margin: auto; }
    .t2d-cf-video { max-height: 100%; margin: auto; background: #000; }
    /* Zip listing — collapsible tree of the archive's contents */
    .t2d-cf-zip { width: 100%; padding: 8px 10px; overflow: auto; font-size: 12px; }
    .t2d-zip-head {
      display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
      color: var(--accent-color, #2c5171); font-weight: 600;
    }
    .t2d-zip-children { padding-left: 14px; border-left: 1px solid rgba(70,130,180,0.18); }
    .t2d-zip-dir > summary {
      cursor: pointer; padding: 2px 4px; border-radius: var(--radius-sm, 8px);
      display: flex; align-items: center; gap: 6px; list-style: none;
    }
    .t2d-zip-dir > summary::-webkit-details-marker { display: none; }
    .t2d-zip-dir > summary:hover { background: rgba(70,130,180,0.08); }
    .t2d-zip-file {
      display: flex; align-items: center; gap: 6px; padding: 2px 4px;
      color: var(--text-color, #333);
    }
    .t2d-zip-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .t2d-zip-size {
      flex-shrink: 0; color: var(--text-light, #94a3b8);
      font-family: var(--font-mono, monospace); font-size: 11px;
    }
    .t2d-cf-title {
      font-family: var(--font-heading, 'Montserrat', sans-serif);
      font-size: 0.95rem; font-weight: 600; color: var(--accent-color, #2c5171);
      margin: 0 0 8px; word-break: break-word;
    }
    .t2d-cf-meta {
      display: grid; grid-template-columns: auto 1fr; gap: 3px 10px;
      margin: 0 0 12px; font-size: 0.8rem;
    }
    .t2d-cf-meta dt { color: var(--text-light, #666); }
    .t2d-cf-meta dd { margin: 0; color: var(--text-color, #333); word-break: break-word; }
    /* Full source path, pinned at the top of the panel so location is the first
       thing seen (matters most for search results that can live anywhere). */
    /* Match the main path-input bar: 36px tall, 6px radius, white field. */
    .t2d-cf-fullpath {
      position: relative; box-sizing: border-box;
      display: flex; align-items: center; gap: 6px;
      height: 36px; margin: 0 0 10px; padding: 0 100px 0 10px;  /* reserve room for 3 action btns */
      background: #fff; border: 1px solid rgba(70,130,180,0.3); border-radius: 6px;
      color: var(--accent-color, #2c5171);
      font-family: var(--font-mono, 'JetBrains Mono', monospace);
      font-size: 0.72rem; line-height: 1.2;
    }
    .t2d-cf-fullpath > i { flex-shrink: 0; font-size: 0.9rem; }
    .t2d-cf-fullpath > span:not(.t2d-cf-path-acts) {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      direction: rtl; text-align: left; unicode-bidi: plaintext;
    }
    /* Tweet-length gist below the path (#133) */
    .t2d-cf-tweet {
      display: flex; align-items: flex-start; gap: 6px;
      margin: -4px 0 10px; padding: 0 4px;
      color: var(--text-light, #666);
      font-family: var(--font-body, 'Inter', sans-serif);
      font-size: 0.78rem; font-style: italic; line-height: 1.25;
    }
    .t2d-cf-tweet[hidden] { display: none; }
    .t2d-cf-tweet > i { flex-shrink: 0; font-style: normal; margin-top: 1px; color: var(--primary-color, #4682b4); }
    /* Floating actions pinned to the right; same 28×28 size as the path-bar buttons. */
    .t2d-cf-path-acts {
      position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
      display: flex; gap: 4px;
    }
    .t2d-cf-path-btn {
      width: 28px; height: 28px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      border: none; border-radius: var(--radius-sm, 8px); cursor: pointer;
      background: rgba(70,130,180,0.10); color: var(--accent-color, #2c5171);
      transition: background 0.15s, color 0.15s;
    }
    .t2d-cf-path-btn:hover { background: var(--primary-color, #4682b4); color: #fff; }
    .t2d-cf-path-btn i { font-size: 0.95rem; }
    .t2d-cf-actions { display: flex; gap: 8px; }
    .t2d-cf-act.active { background: rgba(70,130,180,0.22); color: #2c5171; }
    /* Extracted facets / free tags chips (LLM enrichment) shown in the preview. */
    .t2d-cf-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 6px; }
    .t2d-cf-tags[hidden] { display: none; }
    .t2d-cf-chip { font-size: 0.66rem; line-height: 1; color: #2c5171; background: rgba(70,130,180,0.10);
      border-radius: 10px; padding: 3px 8px; display: inline-flex; align-items: center; gap: 4px; }
    .t2d-cf-chip b { font-weight: 600; color: #1a3a54; text-transform: lowercase; }
    .t2d-cf-chip-tag { color: #475569; background: rgba(70,130,180,0.06); }
    .t2d-cf-chip-tag i { font-size: 11px; opacity: 0.7; }
    /* Inline "×" affordance to clear a single facet/tag value without opening
       the full editor. Sits at the right of the chip, only visible on hover
       of the chip so the row stays calm; turns red on hover to signal danger. */
    .t2d-cf-chip .t2d-cf-chip-rm {
      font-size: 11px; line-height: 1; margin-left: 4px; opacity: 0;
      color: #94a3b8; cursor: pointer; transition: opacity .12s, color .12s;
      padding: 0 2px; border-radius: 4px;
    }
    .t2d-cf-chip:hover .t2d-cf-chip-rm { opacity: 0.85; }
    .t2d-cf-chip .t2d-cf-chip-rm:hover { color: #ef4444; opacity: 1; background: rgba(239,68,68,0.10); }
    /* Manual-tagging (#132): edit affordance + body-level editor popover. */
    .t2d-cf-editbtn { font-size: 0.66rem; line-height: 1; border: 1px dashed rgba(70,130,180,0.4);
      background: transparent; color: #4682b4; border-radius: 10px; padding: 3px 7px; cursor: pointer; display: inline-flex; align-items: center; }
    .t2d-cf-editbtn:hover { background: rgba(70,130,180,0.10); }
    .t2d-tagedit { position: fixed; z-index: 11500; background: #fff; border: 1px solid rgba(0,0,0,0.12);
      border-radius: 12px; box-shadow: 0 8px 28px rgba(0,0,0,0.18); max-height: 70vh; overflow: auto; font-size: 0.72rem; color: #333; }
    .t2d-te-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px;
      border-bottom: 1px solid rgba(0,0,0,0.06); font-weight: 600; color: #2c5171; position: sticky; top: 0; background: #fff; }
    .t2d-te-close { border: none; background: none; cursor: pointer; color: #94a3b8; font-size: 13px; }
    .t2d-te-body { padding: 8px 10px; display: flex; flex-direction: column; gap: 10px; }
    .t2d-te-sec { display: flex; flex-direction: column; gap: 4px; }
    .t2d-te-label { font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #94a3b8; }
    .t2d-te-opts, .t2d-te-tags { display: flex; flex-wrap: wrap; gap: 4px; }
    .t2d-te-opt { font-size: 0.68rem; line-height: 1; border: 1px solid rgba(70,130,180,0.25); background: rgba(70,130,180,0.08);
      color: #2c5171; border-radius: 9px; padding: 3px 8px; cursor: pointer; }
    .t2d-te-opt:hover { background: rgba(70,130,180,0.18); }
    .t2d-te-opt.active { background: var(--primary-color,#4682b4); color: #fff; border-color: var(--accent-color,#2c5171); }
    /* Each allowed value pairs with a small trash icon → BULK clear across
       the whole library. Hidden by default, surfaces on hover of the wrap. */
    .t2d-te-optwrap { display: inline-flex; align-items: center; gap: 2px; }
    .t2d-te-bulkrm {
      border: none; background: none; cursor: pointer; padding: 2px 4px;
      color: #94a3b8; opacity: 0; transition: opacity .12s, color .12s;
      border-radius: 6px; font-size: 11px; line-height: 1;
    }
    .t2d-te-optwrap:hover .t2d-te-bulkrm { opacity: 0.85; }
    .t2d-te-bulkrm:hover { color: #ef4444; opacity: 1; background: rgba(239,68,68,0.10); }
    .t2d-te-tag { font-size: 0.68rem; line-height: 1; background: rgba(70,130,180,0.06); color: #475569; border-radius: 9px; padding: 3px 7px; display: inline-flex; align-items: center; gap: 4px; }
    .t2d-te-tag i { cursor: pointer; opacity: 0.6; font-size: 11px; }
    .t2d-te-tag i:hover { opacity: 1; color: #ef4444; }
    .t2d-te-new { display: flex; gap: 4px; align-items: center; }
    .t2d-te-new input { flex: 1; min-width: 0; height: 26px; box-sizing: border-box; font-size: 0.68rem; padding: 3px 7px; border: 1px solid rgba(70,130,180,0.25); border-radius: 8px; outline: none; }
    .t2d-te-new input:focus { border-color: var(--primary-color,#4682b4); }
    /* All add buttons are a perfect 26×26 square. */
    .t2d-te-addnew, .t2d-te-addtag, .t2d-te-addkey {
      flex: 0 0 26px; width: 26px; height: 26px; box-sizing: border-box;
      display: inline-flex; align-items: center; justify-content: center;
      border: none; background: rgba(70,130,180,0.12); color: #2c5171; border-radius: 8px; padding: 0;
      cursor: pointer; transition: background 0.15s; }
    .t2d-te-addnew:hover, .t2d-te-addtag:hover, .t2d-te-addkey:hover { background: rgba(70,130,180,0.24); }
    .t2d-te-addnew i, .t2d-te-addtag i, .t2d-te-addkey i { font-size: 13px; line-height: 1; }
    .t2d-te-empty { font-size: 0.66rem; color: #94a3b8; }
    /* Collapsible file preview → frees vertical room for the MD / resumen cards. */
    .t2d-cf-preview.collapsed { display: none; }
    /* Inline-rendered derived artifact (converted MD / summary) — small & compact:
       3px vertical padding, line-height 1. */
    .t2d-cf-derived { margin-top: 6px; }
    .t2d-cf-derived[hidden] { display: none; }
    .t2d-cf-derived-md { font-size: 0.7rem; color: #334155; line-height: 1;
      background: rgba(70,130,180,0.05); border-radius: 8px; padding: 3px 10px;
      max-height: 55vh; overflow: auto; }
    /* renderMarkdown applies INLINE styles → override with !important to stay compact. */
    .t2d-cf-derived-md :is(h1,h2,h3,h4,p,ul,ol,table,pre,blockquote) { margin: 2px 0 !important; line-height: 1.05 !important; }
    .t2d-cf-derived-md li { line-height: 1.05 !important; margin: 0 !important; }
    .t2d-cf-derived-md :is(h1,h2,h3,h4) { font-size: 0.8rem !important; }
    .t2d-cf-derived-md :is(p,li,span,td,th) { font-size: 0.7rem !important; }
    .t2d-cf-derived-empty { font-size: 0.72rem; color: #94a3b8; padding: 6px 4px; }
    /* Converted-MD pager controls. */
    .t2d-cf-mdpager { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 4px; }
    .t2d-cf-pgbtn { width: 24px; height: 24px; border: none; background: rgba(70,130,180,0.10); color: #2c5171;
      border-radius: 6px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
    .t2d-cf-pgbtn:hover:not(:disabled) { background: rgba(70,130,180,0.22); }
    .t2d-cf-pgbtn:disabled { opacity: 0.35; cursor: default; }
    .t2d-cf-pgnum { font-size: 0.66rem; color: #64748b; font-family: var(--font-mono, monospace); }

    /* Sort dropdown menu (anchored to the toolbar sort button). */
    .t2d-sort-menu {
      position: fixed; z-index: 1700; min-width: 150px;
      background: #fff; border: 1px solid rgba(70,130,180,0.25);
      border-radius: var(--radius-sm, 8px); box-shadow: 0 6px 20px rgba(0,0,0,0.15);
      padding: 4px; display: flex; flex-direction: column; gap: 2px;
    }
    .t2d-sort-item {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      width: 100%; padding: 6px 10px; border: none; background: none; cursor: pointer;
      border-radius: var(--radius-sm, 8px); color: var(--text-color, #333);
      font-family: var(--font-body, 'Inter', sans-serif); font-size: 0.82rem; text-align: left;
    }
    .t2d-sort-item:hover { background: rgba(70,130,180,0.08); }
    .t2d-sort-item.active { color: var(--accent-color, #2c5171); font-weight: 600; background: rgba(70,130,180,0.10); }
    .t2d-sort-item i { font-size: 0.9rem; }

    /* Search scope/mode dropdown (shares .t2d-sort-menu base; adds group labels). */
    .t2d-search-menu { min-width: 190px; }
    .t2d-search-menu .t2d-sort-item span { display: inline-flex; align-items: center; gap: 8px; }
    .t2d-menu-group-label {
      font-family: var(--font-body, 'Inter', sans-serif); font-size: 0.66rem; font-weight: 600;
      letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-light, #888);
      padding: 6px 10px 2px;
    }
    .t2d-menu-group-label:not(:first-child) { margin-top: 4px; border-top: 1px solid rgba(70,130,180,0.12); padding-top: 7px; }

    /* ── Knowledge-graph viz panel ── */
    #t2d-graph-panel {
      position: fixed; top: 0; right: 0; height: 100%; width: min(960px, 94vw);
      background: #0f1622; box-shadow: -8px 0 30px rgba(0,0,0,.35);
      transform: translateX(100%); transition: transform .25s ease; z-index: 1600;
      display: flex; flex-direction: column;
    }
    #t2d-graph-panel.open { transform: translateX(0); }
    .t2d-gv-header {
      display: flex; align-items: center; gap: 12px; padding: 10px 14px;
      border-bottom: 1px solid rgba(255,255,255,0.08); color: #e8eef6;
    }
    .t2d-gv-header h2 { margin: 0; font-size: 15px; font-weight: 600; color: #e8eef6; white-space: nowrap; }
    .t2d-gv-lib { height: 26px; max-width: 220px; background: rgba(255,255,255,0.08); color: #e8eef6; border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; padding: 0 8px; font-size: 12px; cursor: pointer; }
    .t2d-gv-lib option { color: #1a3a54; }
    .t2d-gv-chips { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
    .t2d-gv-chip {
      font-size: 11px; line-height: 1; padding: 4px 9px; border-radius: 999px; cursor: pointer;
      border: 1px solid var(--gv-c, #888); color: #cdd6e0; background: transparent; opacity: .45;
      display: inline-flex; align-items: center; gap: 5px;
    }
    .t2d-gv-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gv-c, #888); }
    .t2d-gv-chip.on { opacity: 1; background: color-mix(in srgb, var(--gv-c) 18%, transparent); color: #fff; }
    .t2d-gv-close { background: none; border: 0; color: #9fb0c2; cursor: pointer; border-radius: 6px; padding: 4px; display: flex; }
    .t2d-gv-close:hover { background: rgba(255,255,255,0.1); color: #fff; }
    .t2d-gv-body { position: relative; flex: 1; min-height: 0; overflow: hidden; }
    #t2d-gv-canvas { display: block; width: 100%; height: 100%; cursor: grab; }
    .t2d-gv-tip {
      position: absolute; pointer-events: none; background: rgba(15,22,34,.92); color: #fff;
      font-size: 12px; padding: 4px 8px; border-radius: 6px; max-width: 320px;
      border: 1px solid rgba(255,255,255,.15); z-index: 3;
    }
    .t2d-gv-empty, .t2d-gv-loading {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      color: #9fb0c2; font-size: 14px; text-align: center; padding: 24px;
      pointer-events: none;   /* never block canvas mouse events */
    }
    /* [hidden] MUST beat display:flex above — else the overlay stays up forever,
       covering the canvas (no interaction, stuck "Cargando"). */
    .t2d-gv-loading[hidden], .t2d-gv-empty[hidden], .t2d-gv-legend[hidden],
    .t2d-gv-tip[hidden], .t2d-gv-pop[hidden], .t2d-gv-facet[hidden] { display: none !important; }
    .t2d-gv-legend {
      position: absolute; left: 12px; bottom: 12px; z-index: 2;
      background: rgba(15,22,34,.82); border: 1px solid rgba(255,255,255,.12);
      border-radius: 8px; padding: 8px 10px; max-height: 46%; overflow-y: auto;
      max-width: 240px;
    }
    /* Stats line above the legend title: node/edge counts + "+" load-more button */
    .t2d-gv-stats {
      display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
      padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,.08);
    }
    .t2d-gv-stats-line { font-size: 11px; color: #b5c2d3; line-height: 1; flex: 1; }
    .t2d-gv-more {
      background: rgba(70,130,180,.25); color: #d4dde7; border: 1px solid rgba(70,130,180,.45);
      border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600;
      cursor: pointer; line-height: 1; font-family: 'JetBrains Mono', monospace;
    }
    .t2d-gv-more:hover:not([disabled]) { background: rgba(70,130,180,.5); }
    .t2d-gv-more[disabled] { opacity: .4; cursor: not-allowed; }
    .t2d-gv-legend-title { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: #8fa0b4; margin-bottom: 5px; }
    .t2d-gv-legi { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #d4dde7; line-height: 1.7; cursor: pointer; border-radius: 5px; padding: 0 4px; }
    .t2d-gv-legi:hover { background: rgba(255,255,255,.08); }
    .t2d-gv-legi.off { opacity: .4; }
    .t2d-gv-legi.on { background: rgba(255,255,255,.16); font-weight: 600; }
    .t2d-gv-legi span.sw { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
    .t2d-gv-legi .cnt { margin-left: auto; color: #7e90a4; font-size: 11px; }
    /* facet-vector selector (top-left) */
    .t2d-gv-facet {
      position: absolute; left: 12px; top: 12px; z-index: 2; display: flex; gap: 6px; align-items: center;
      background: rgba(15,22,34,.82); border: 1px solid rgba(255,255,255,.12);
      border-radius: 8px; padding: 5px 8px;
    }
    .t2d-gv-facet label { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: #8fa0b4; }
    .t2d-gv-facet select {
      background: #1a2535; color: #e8eef6; border: 1px solid rgba(255,255,255,.15);
      border-radius: 6px; font-size: 12px; padding: 2px 6px;
    }
    /* node info popup (click a node) */
    .t2d-gv-pop {
      position: absolute; z-index: 4; width: 280px; max-width: 70%;
      background: rgba(17,24,37,.97); border: 1px solid rgba(255,255,255,.16);
      border-radius: 10px; padding: 12px 13px; color: #e8eef6; box-shadow: 0 8px 26px rgba(0,0,0,.45);
    }
    .t2d-gv-pop h4 { margin: 0 0 6px; font-size: 13px; font-weight: 600; line-height: 1.25; }
    .t2d-gv-pop .facets { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 10px; }
    .t2d-gv-pop .fct { font-size: 10px; background: rgba(255,255,255,.08); border-radius: 999px; padding: 2px 7px; color: #cdd6e0; }
    .t2d-gv-pop .acts { display: flex; gap: 8px; }
    .t2d-gv-pop button { flex: 1; font-size: 12px; padding: 5px 8px; border-radius: 6px; border: 0; cursor: pointer; }
    .t2d-gv-pop .primary { background: #4682b4; color: #fff; }
    .t2d-gv-pop .ghost { background: rgba(255,255,255,.1); color: #cdd6e0; }
    .t2d-gv-pop .x { position: absolute; top: 6px; right: 8px; background: none; border: 0; color: #8fa0b4; cursor: pointer; font-size: 14px; flex: none; padding: 0; }

/* Tag-rules header history-toggle "active" state (ghost icon button pressed). */
/* State variants for drive slide-panel header buttons (.pd-btn-icon): active
   toggle (e.g. tag-history open) and destructive confirm (e.g. skills restore).
   Toggle via classList — never one-off inline styles. */
.pd-btn-icon.active { background: #4682b4; color: #fff; border-color: #4682b4; }
.pd-btn-icon.danger { color: #b91c1c; border-color: rgba(185,28,28,0.35); }
.pd-btn-icon.danger:hover { background: #b91c1c; color: #fff; border-color: #b91c1c; }