/*
 * ╔═══════════════════════════════════════════════════════════╗
 * ║                      C Y B E R G L O W                    ║
 * ║              An Obsidian Theme by DevM0nk3y               ║
 * ║                        v1.0.0                              ║
 * ╚═══════════════════════════════════════════════════════════╝
 *
 * Secciones:
 *   1.  Style Settings YAML
 *   2.  Variables de Fundación
 *   3.  Navegación
 *   4.  Editor
 *   5.  Bloques de Código (Xcode Midnight)
 *   6.  Componentes UI
 *   7.  Correcciones y Componentes adicionales
 *   8.  Eliminación de bordes (fuera del card layout)
 *   9.  Card Layout: Tab header refinements
 *   10. Card Layout: Vault profile en sidebar
 *   11. Card Layout: Graph controls en splits laterales
 */


/* ============================================================
   SECCIÓN 1 — Style Settings YAML
   ============================================================ */

/* @settings

name: CyberGlow
id: cyberglow-settings
settings:
  # Colors
  - id: cg-colors-header
    title: Colors
    description: "Theme Accent, Active Color, Background Intensity"
    type: heading
    level: 1
    collapsed: true
  - id: cg-primary-color
    title: Primary Color
    description: "Main accent color (default: cyan)"
    type: variable-themed-color
    format: hex
    default-dark: '#00FFFF'
  - id: cg-secondary-color
    title: Secondary Color
    description: "Secondary color for hover and details (default: magenta)"
    type: variable-themed-color
    format: hex
    default-dark: '#FF00FF'
  - id: cg-active-color
    title: Active Color
    description: "Color for active/selected elements"
    type: variable-themed-color
    format: hex
    default-dark: '#FF00FF'
  - id: cg-bg-intensity
    title: Background Intensity
    description: "How dark the background is"
    type: class-select
    default: cg-bg-default
    options:
      - label: Abyss (darkest)
        value: cg-bg-abyss
      - label: Default
        value: cg-bg-default
      - label: Elevated (lightest)
        value: cg-bg-elevated
  # Editor
  - id: cg-editor-header
    title: Editor
    description: "Bold, Italic, Headings styling"
    type: heading
    level: 1
    collapsed: true
  - id: cg-colored-bold
    title: Colored Bold
    description: "Bold text uses the primary theme color"
    type: class-toggle
    default: false
  - id: cg-colored-italic
    title: Colored Italic
    description: "Italic text uses the active theme color"
    type: class-toggle
    default: false
  - id: cg-colored-headings
    title: Neon Gradient Headings
    description: "Headings use neon gradient colors"
    type: class-toggle
    default: false
  # Workspace
  - id: cg-ui-header
    title: Workspace
    description: "Layout, Cards, Tabs, Status Bar, Scrollbars, etc."
    type: heading
    level: 1
    collapsed: true
  - id: cg-autohide-titlebar
    title: Auto-hide Titlebar
    description: "Title bar hides until hover"
    type: class-toggle
    default: false
  - id: cg-slim-scrollbars
    title: Slim Scrollbars
    description: "Minimalist scrollbars with accent color"
    type: class-toggle
    default: false
  - id: cg-statusbar-header
    title: "Status Bar"
    description: "Select status bar style"
    type: heading
    level: 2
    collapsed: true
  - id: cg-status-bar
    title: Show Status Bar
    description: "Show the bottom status bar (hidden by default)"
    type: class-toggle
    default: false
  - id: cg-tabs-header
    title: "Tabs"
    description: "Tab bar appearance and behavior"
    type: heading
    level: 2
    collapsed: true
  - id: cg-tab-style
    title: "Tab style"
    type: class-select
    default: cg-tab-floating
    options:
      - label: Floating Tabs
        value: cg-tab-floating
      - label: Minimal Tabs
        value: cg-tab-minimal
  - id: cg-tab-gap
    title: Tab Gap
    description: "Spacing between workspace tabs"
    type: variable-number
    default: 10
    format: px
  - id: cg-custom-tab-height
    title: "Custom tab height"
    description: "Adjust the height of workspace tabs"
    type: variable-number
    default: 40
    format: px
  - id: cg-workspace-layout-header
    title: Workspace Layout
    description: "Workspace layout and arrangement"
    type: heading
    level: 2
    collapsed: true
  - id: cg-workspace-layout
    title: Workspace Layout variant
    type: class-select
    default: cg-layout-default
    options:
      - label: Default
        value: cg-layout-default
      - label: Cards
        value: cg-card-layout
  - id: cg-hide-borders
    title: Hide Borders
    description: "Remove UI borders for a cleaner look"
    type: class-toggle
    default: true
  - id: cg-card-layout-settings-header
    title: Card Layout Settings
    description: "Card radius, padding, and component toggles"
    type: heading
    level: 3
    collapsed: true
  - id: cg-card-filebrowser
    title: Card Layout — File Browser
    description: "Card style for the file explorer"
    type: class-toggle
    default: true
  - id: cg-card-actions
    title: Card Layout — Actions Panel
    description: "Card style for the side actions panel"
    type: class-toggle
    default: true
  - id: cg-card-shadows
    title: Card Shadows
    description: "Add shadows to layout cards"
    type: class-toggle
    default: false
  # Support
  - id: cg-support-header
    title: Support CyberGlow
    description: "If you like the theme, here are some ways to support development"
    type: heading
    level: 1
    collapsed: true
  - id: cg-support-star
    title: "⭐ Star the Theme on GitHub"
    description: "https://github.com/DevM0nk3y/CyberGlow"
    type: info-text
    markdown: true
  - id: cg-support-issue
    title: "🐛 Submit an Issue on GitHub"
    description: "https://github.com/DevM0nk3y/CyberGlow/issues"
    type: info-text
    markdown: true
  - id: cg-url-donate
    title: "☕ Buy Me a Coffee via Paypal"
    description: "<details><summary><b>Choose your support tier</b></summary><br><ul style='list-style:none; padding-left:10px;'><li style='margin-bottom:6px;'>☕ <a href='https://www.paypal.com/paypalme/abellazaro067/3usd'>Tier 1: Donate $3 USD</a></li><li style='margin-bottom:6px;'>☕ ☕ <a href='https://www.paypal.com/paypalme/abellazaro067/5usd'>Tier 2: Donate $5 USD</a></li><li style='margin-bottom:6px;'>☕ ☕ ☕ <a href='https://www.paypal.com/paypalme/abellazaro067/10usd'>Tier 3: Donate $10 USD</a></li></ul></details>"
    type: info-text
    markdown: true
*/



/* Style Settings — Support heading en cian */
.style-settings-container .setting-item[data-id="cg-support-header"] .setting-item-name {
  color: var(--cg-primary);
}

/* Style Settings — gradient bar bajo Colors */
.style-settings-container .setting-item[data-id="cg-colors-header"] .setting-item-name::after {
  content: "";
  display: block;
  height: 3px;
  margin-top: 6px;
  border-radius: 2px;
  background: linear-gradient(90deg, #00FFFF, #00FF88, #FFFF00, #FF8800, #FF00FF, #8800FF, #00FFFF);
}

/* ============================================================
   SECCIÓN 2 — Variables de Fundación
   ============================================================ */

.theme-dark {
  --cg-primary: var(--cg-primary-color, #00FFFF);
  --cg-secondary: var(--cg-secondary-color, #FF00FF);
  --cg-active: var(--cg-active-color, #FF00FF);

  /* Variables RGB para uso en rgba() */
  --cg-primary-rgb: 0, 255, 255;
  --cg-secondary-rgb: 255, 0, 255;
  --cg-active-rgb: 255, 0, 255;

  /* Variables para bloques de código */
  --cg-code-bg: #000000;
  --cg-code-text: #FFFFFF;

  --cg-bg-primary: #0a0a0f;
  --cg-bg-secondary: #181825;
  --cg-bg-tertiary: #1a1a25;
  --cg-text: #e0e0e8;
  --cg-text-muted: #8888a0;
  --cg-text-faint: #555570;

  /* Mapeo a variables de Obsidian — todo el shell usa el mismo fondo */
  --background-primary: var(--cg-bg-primary);
  --background-primary-alt: var(--cg-bg-primary);
  --background-secondary: var(--cg-bg-primary);
  --background-secondary-alt: var(--cg-bg-primary);
  --background-modifier-border: rgba(var(--cg-primary-rgb), 0.08);
  --background-modifier-border-hover: rgba(var(--cg-primary-rgb), 0.15);
  --background-modifier-border-focus: rgba(var(--cg-primary-rgb), 0.25);

  --text-normal: var(--cg-text);
  --text-muted: var(--cg-text-muted);
  --text-faint: var(--cg-text-faint);
  --text-accent: var(--cg-primary);
  --text-accent-hover: var(--cg-secondary);
  --text-on-accent: #0a0a0f;

  --interactive-accent: var(--cg-primary);
  --interactive-accent-hover: var(--cg-secondary);
  --interactive-normal: var(--cg-bg-secondary);
  --interactive-hover: var(--cg-bg-tertiary);

  --accent-h: 180;
  --accent-s: 100%;
  --accent-l: 50%;

  --color-red: #FF4647;
  --color-green: #4BD156;
  --color-blue: #00B1FF;
  --color-yellow: #EB905A;
  --color-cyan: #00FFFF;
  --color-purple: #8B87FF;
  --color-pink: #DE38A5;

  /* Escala base */
  --color-base-00: #0a0a0f;
  --color-base-05: #0e0e15;
  --color-base-10: #12121a;
  --color-base-20: #1a1a25;
  --color-base-25: #1e1e2a;
  --color-base-30: #22222f;
  --color-base-35: #282835;
  --color-base-40: #2e2e3b;
  --color-base-50: #3a3a4a;
  --color-base-60: #555570;
  --color-base-70: #8888a0;
  --color-base-100: #e0e0e8;

  /* Títulos del sidebar */
  --nav-item-color: var(--cg-text-muted);
  --nav-item-color-hover: var(--cg-primary);
  --nav-item-color-active: var(--cg-primary);
  --nav-item-color-selected: var(--cg-primary);
  --nav-item-background-hover: rgba(var(--cg-primary-rgb), 0.05);
  --nav-item-background-active: rgba(var(--cg-primary-rgb), 0.1);
  --nav-item-background-selected: rgba(var(--cg-primary-rgb), 0.1);

  /* Tabs */
  --tab-text-color: var(--cg-text-muted);
  --tab-text-color-focused: var(--cg-active);
  --tab-text-color-focused-active: var(--cg-primary);
  --tab-text-color-focused-active-current: var(--cg-primary);

  /* Scrollbar */
  --scrollbar-bg: transparent;
  --scrollbar-thumb-bg: rgba(var(--cg-primary-rgb), 0.15);
  --scrollbar-active-thumb-bg: rgba(var(--cg-primary-rgb), 0.3);
}

/* Variantes de intensidad de fondo */
.cg-bg-abyss.theme-dark {
  --cg-bg-primary: #000000;
  --cg-bg-secondary: #080810;
  --cg-bg-tertiary: #101018;
}

.cg-bg-elevated.theme-dark {
  --cg-bg-primary: #141420;
  --cg-bg-secondary: #1c1c2a;
  --cg-bg-tertiary: #242435;
}


/* ============================================================
   SECCIÓN 3 — Navegación
   ============================================================ */

/* Iconos base */
.side-dock-ribbon-action svg,
.nav-action-button svg,
.tab-header-icon svg,
.nav-folder-collapse-indicator svg,
.nav-file-icon svg,
.nav-folder-icon svg,
.view-action svg,
.clickable-icon svg,
.search-input-clear-button svg {
  color: var(--cg-primary);
  stroke: var(--cg-primary);
  fill: none;
  stroke-width: 2px;
}

/* Estado activo */
.is-active svg,
.is-selected svg,
.is-active .clickable-icon svg,
.is-active .nav-action-button svg,
.is-active .tab-header-icon svg,
.workspace-tab-header.is-active svg,
.side-dock-ribbon-action.is-active svg,
.nav-file-title.is-active svg {
  color: var(--cg-active);
  stroke: var(--cg-active);
  --icon-color: var(--cg-active);
}

/* Hover → magenta */
.side-dock-ribbon-action:hover svg,
.nav-action-button:hover svg,
.view-action:hover svg,
.clickable-icon:hover svg {
  color: var(--cg-secondary);
  stroke: var(--cg-secondary);
  --icon-color: var(--cg-secondary);
}

/* Archivo activo en explorador */
.nav-file-title.is-active,
.nav-file.is-active .nav-file-title {
  color: var(--cg-primary);
}

/* Tabs — estilo pill/card con gap */
.workspace-tabs:not(.mod-stacked) {
  --tab-background: var(--cg-bg-secondary);
  --tab-background-active: var(--cg-bg-primary);
  --tab-font-size: 12px;
  --tab-height: 28px;
  --tab-max-width: 200px;
}

.mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner,
.mod-horizontal:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner {
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
  gap: var(--cg-tab-gap, 10px);
}

.mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header,
.mod-horizontal:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
  background: var(--tab-background);
  border-radius: 6px;
  box-shadow: none;
  height: var(--tab-height);
  padding: 0;
  border: 1px solid rgba(var(--cg-primary-rgb), 0.08);
}

.workspace-tabs:not(.mod-stacked) .workspace-tab-header::before,
.workspace-tabs:not(.mod-stacked) .workspace-tab-header::after,
.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner::after {
  display: none;
}

.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
  max-width: var(--tab-max-width);
}

.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner {
  padding: 0 4px 0 8px;
}

/* Tab activo */
.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active {
  flex-grow: 1.67;
  max-width: 300px;
  background-color: var(--cg-bg-primary);
}

.mod-root .workspace-tabs:not(.mod-stacked).mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title {
  color: var(--cg-primary);
}

.mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active .workspace-tab-header-inner-title {
  color: var(--cg-active);
}

/* Tabs inactivos */
.workspace-tab-header:not(.is-active) .workspace-tab-header-inner-title {
  color: rgba(var(--cg-primary-rgb), 0.5);
}

.workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
  background-color: transparent;
}


/* ============================================================
   SECCIÓN 4 — Editor
   ============================================================ */


/* Headings h1-h6 — color normal del texto, sin gradientes */
.markdown-rendered h1,
.markdown-rendered h2,
.markdown-rendered h3,
.markdown-rendered h4,
.markdown-rendered h5,
.markdown-rendered h6 {
  color: var(--cg-text);
}

.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6 {
  color: var(--cg-text);
}

/* HR separadores */
.cm-line hr,
.markdown-preview-view hr,
.markdown-rendered hr {
  margin-block-start: 4em;
  margin-block-end: 4em;
  border: none;
  height: 0;
  border-bottom: 1px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(to right, transparent, var(--cg-primary), transparent);
  position: relative;
  overflow: visible;
}

.cm-line hr::after,
.markdown-rendered hr::after {
  content: '§';
  display: inline-block;
  position: absolute;
  top: 50%; 
  left: 50%;
  transform: translate(-50%, -50%) rotate(60deg);
  transform-origin: 50% 50%;
  padding: 0.5rem;
  color: var(--cg-secondary);
  background-color: var(--cg-bg-secondary);
}

.community-theme-modal .markdown-rendered hr::after {
  background-color: var(--modal-background, var(--cg-bg-secondary)); 
}

/* Links */
.cm-url, .cm-link,
.markdown-rendered a,
.internal-link {
  color: var(--cg-primary);
  text-decoration: none;
}

.markdown-rendered a:hover,
.internal-link:hover {
  color: var(--cg-secondary);
}

/* Tags */
.tag, .cm-hashtag {
  color: var(--cg-secondary);
  background-color: rgba(var(--cg-secondary-rgb), 0.1);
  border-radius: 4px;
  padding: 0 4px;
}


/* Tablas */
.markdown-rendered table {
  border-collapse: collapse;
}

.markdown-rendered th {
  background-color: var(--cg-bg-tertiary);
  color: var(--cg-primary);
  font-weight: 600;
}

.markdown-rendered td,
.markdown-rendered th {
  border: 1px solid rgba(var(--cg-primary-rgb), 0.1);
  padding: 6px 12px;
}

.markdown-rendered tr:hover td {
  background-color: rgba(var(--cg-primary-rgb), 0.03);
}

/* Blockquotes */
.markdown-rendered blockquote {
  border-left: 3px solid var(--cg-primary);
  color: var(--cg-text-muted);
  padding-left: 1em;
}

/* Listas — marcadores */
.list-bullet::after {
  color: var(--cg-text);
}

.markdown-rendered ul > li::marker,
.markdown-rendered ol > li::marker {
  color: var(--cg-text);
}


/* ============================================================
   SECCIÓN 5 — Bloques de Código (Xcode Midnight)
   ============================================================ */

/* --- CodeMirror 6 — Editor — activo siempre por defecto --- */
.cm-s-obsidian .HyperMD-codeblock {
  background-color: var(--cg-code-bg);
  color: var(--cg-code-text);
}
.cm-s-obsidian .HyperMD-codeblock .cm-comment { color: #4BD156; }
.cm-s-obsidian .HyperMD-codeblock .cm-string,
.cm-s-obsidian .HyperMD-codeblock .cm-string-2 { color: #FF4647; }
.cm-s-obsidian .HyperMD-codeblock .cm-number,
.cm-s-obsidian .HyperMD-codeblock .cm-atom { color: #8B87FF; }
.cm-s-obsidian .HyperMD-codeblock .cm-keyword { color: #DE38A5; }
.cm-s-obsidian .HyperMD-codeblock .cm-def { color: #08FA95; }
.cm-s-obsidian .HyperMD-codeblock .cm-variable-2,
.cm-s-obsidian .HyperMD-codeblock .cm-variable-3,
.cm-s-obsidian .HyperMD-codeblock .cm-type,
.cm-s-obsidian .HyperMD-codeblock .cm-builtin,
.cm-s-obsidian .HyperMD-codeblock .cm-property { color: #00B1FF; }
.cm-s-obsidian .HyperMD-codeblock .cm-meta,
.cm-s-obsidian .HyperMD-codeblock .cm-tag { color: #EB905A; }
.cm-s-obsidian .HyperMD-codeblock .cm-attribute,
.cm-s-obsidian .HyperMD-codeblock .cm-qualifier { color: #3B5AAC; }
.cm-s-obsidian .HyperMD-codeblock .cm-variable,
.cm-s-obsidian .HyperMD-codeblock .cm-operator { color: var(--cg-code-text); }

/* --- Prism.js — Vista de Lectura --- */
.markdown-rendered pre code {
  background-color: var(--cg-code-bg);
  color: var(--cg-code-text);
}
.markdown-rendered pre {
  background-color: var(--cg-code-bg);
}
.markdown-rendered code .token.comment,
.markdown-rendered code .token.prolog,
.markdown-rendered code .token.doctype,
.markdown-rendered code .token.cdata { color: #4BD156; }
.markdown-rendered code .token.string,
.markdown-rendered code .token.attr-value,
.markdown-rendered code .token.regex { color: #FF4647; }
.markdown-rendered code .token.number,
.markdown-rendered code .token.boolean,
.markdown-rendered code .token.constant { color: #8B87FF; }
.markdown-rendered code .token.keyword,
.markdown-rendered code .token.important,
.markdown-rendered code .token.atrule { color: #DE38A5; }
.markdown-rendered code .token.function { color: #08FA95; }
.markdown-rendered code .token.class-name,
.markdown-rendered code .token.builtin,
.markdown-rendered code .token.property { color: #00B1FF; }
.markdown-rendered code .token.tag,
.markdown-rendered code .token.selector { color: #EB905A; }
.markdown-rendered code .token.attr-name { color: #3B5AAC; }
.markdown-rendered code .token.operator,
.markdown-rendered code .token.punctuation { color: var(--cg-code-text); }
.markdown-rendered code .token.parameter { color: #EB905A; }
.markdown-rendered code .token.variable { color: #00B1FF; }
.markdown-rendered code .token.parameter.variable { color: #00B1FF; }

pre.code-styler-pre,
pre.code-styler-pre code {
  background-color: var(--cg-code-bg);
  color: var(--cg-code-text);
}
pre.code-styler-pre .token.comment,
pre.code-styler-pre .token.prolog { color: #4BD156; }
pre.code-styler-pre .token.string,
pre.code-styler-pre .token.attr-value,
pre.code-styler-pre .token.regex { color: #FF4647; }
pre.code-styler-pre .token.number,
pre.code-styler-pre .token.boolean,
pre.code-styler-pre .token.constant { color: #8B87FF; }
pre.code-styler-pre .token.keyword,
pre.code-styler-pre .token.important { color: #DE38A5; }
pre.code-styler-pre .token.function { color: #08FA95; }
pre.code-styler-pre .token.class-name,
pre.code-styler-pre .token.builtin,
pre.code-styler-pre .token.property { color: #00B1FF; }
pre.code-styler-pre .token.tag,
pre.code-styler-pre .token.selector { color: #EB905A; }
pre.code-styler-pre .token.attr-name { color: #3B5AAC; }
pre.code-styler-pre .token.operator,
pre.code-styler-pre .token.punctuation { color: var(--cg-code-text); }
pre.code-styler-pre .token.parameter { color: #EB905A; }
pre.code-styler-pre .token.variable { color: #00B1FF; }
pre.code-styler-pre .token.parameter.variable { color: #00B1FF; }


/* ============================================================
   SECCIÓN 6 — Componentes UI
   ============================================================ */

/* Botones primarios */
.mod-cta {
  background-color: var(--cg-primary);
  color: var(--cg-bg-primary);
  font-weight: 600;
  border: none;
}

.mod-cta:hover {
  background-color: var(--cg-active);
  color: var(--cg-bg-primary);
}

/* Checkboxes */
input[type="checkbox"]:checked {
  background-color: var(--cg-primary);
  border-color: var(--cg-primary);
}

/* Scrollbars delgadas — usa API estándar que respeta auto-hide nativo de macOS */
.cg-slim-scrollbars * {
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--cg-primary-rgb), 0.15) transparent;
}

/* Bordes ocultos — elimina dividers y outlines entre paneles */
body.cg-hide-borders .workspace-leaf,
body.cg-hide-borders .workspace-tab-header-container,
body.cg-hide-borders .workspace-split {
  border: none;
}
body.cg-hide-borders.cg-card-layout {
  --cg-card-outline-color: transparent;
}
body.cg-hide-borders.cg-card-layout .menu {
  border: none;
}
body.cg-hide-borders.cg-tab-floating .workspace-tab-header {
  border: none;
}

/* -----------------------------------------------
 *  Card Layout — Variables y estructura base
 * ----------------------------------------------- */

body.cg-card-layout {
  --cg-card-bg: var(--cg-bg-primary);
  --cg-card-fg: var(--cg-bg-secondary);
  --cg-card-outline-color: rgba(var(--cg-primary-rgb), 0.08);
  --cg-card-radius: var(--radius-xl, 12px);
  --cg-card-padding: 8px;
  --cg-card-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  --divider-color: transparent;
  --divider-color-hover: rgba(var(--cg-primary-rgb), 0.1);
  --divider-width: 4px;
  --divider-width-hover: 4px;
  --tab-container-background: var(--cg-card-bg);
  --ribbon-padding: 0;
}

/* Workspace y container — fondo del "canvas" detrás de las cards */
body.cg-card-layout .workspace,
body.cg-card-layout .horizontal-main-container,
body.cg-card-layout .mod-vertical .workspace-tabs {
  background-color: var(--cg-card-bg);
}

/* Leaves en splits laterales y root — fondo del canvas */
body.cg-card-layout .mod-left-split .workspace-tabs .workspace-leaf,
body.cg-card-layout .mod-right-split .workspace-tabs .workspace-leaf,
body.cg-card-layout .mod-left-split,
body.cg-card-layout .mod-vertical .workspace-tab-container,
body.cg-card-layout .mod-vertical,
body.cg-card-layout .workspace-split.mod-vertical,
body.cg-card-layout .workspace-fake-target-overlay:not(.is-in-sidebar) .workspace-tabs .workspace-leaf,
body.cg-card-layout .mod-root .workspace-tabs .workspace-leaf,
body.cg-card-layout .workspace-ribbon.mod-left,
body.cg-card-layout .workspace-ribbon.mod-left:before {
  background-color: var(--cg-card-bg);
}

/* Padding horizontal en sidebar tab containers */
body.cg-card-layout .mod-left-split .workspace-tab-container,
body.cg-card-layout .mod-right-split .workspace-tab-container {
  padding-left: var(--cg-card-padding);
  padding-right: var(--cg-card-padding);
  background-color: var(--cg-card-bg);
}

/* Tab header — sin borde inferior */
body.cg-card-layout .workspace-tab-header-container,
body.cg-card-layout .workspace-ribbon.mod-left:before {
  border-bottom: none;
}

/* Padding lateral en workspace-tabs verticales */
body.cg-card-layout:not(.is-phone) .mod-vertical .workspace-tabs {
  padding-left: var(--cg-card-padding);
  padding-right: var(--cg-card-padding);
}

/* === CARD — workspace-leaf-content principal === */
/* Todos los leaf-content EXCEPTO file-explorer (a menos que cg-card-filebrowser esté activo) */
body.cg-card-layout .workspace-split .workspace-leaf-content:not([data-type="file-explorer"]),
body.cg-card-layout.cg-card-filebrowser .workspace-leaf-content[data-type="file-explorer"] {
  background-color: var(--cg-card-fg);
  border: 1px solid var(--cg-card-outline-color);
}

/* Bordes redondeados + separación inferior — no en móvil */
body.cg-card-layout:not(.is-phone) .workspace-split .workspace-leaf-content:not([data-type="file-explorer"]),
body.cg-card-layout:not(.is-phone).cg-card-filebrowser .workspace-leaf-content[data-type="file-explorer"] {
  border-radius: var(--cg-card-radius);
  margin-bottom: var(--cg-card-padding);
}

/* Paneles laterales — canvas (fondo detrás de las cards) */
body.cg-card-layout .mod-left-split .workspace-leaf,
body.cg-card-layout .mod-right-split .workspace-leaf {
  background-color: var(--cg-card-bg);
  margin-bottom: var(--cg-card-padding);
}

/* Paneles laterales — sobreescribir variables de Obsidian en el scope del sidebar.
 * Obsidian aplica --background-primary en workspace-leaf-content vía sus CSS base.
 * Al redefinirla aquí, el leaf-content hereda el color de card sin necesitar . */
body.cg-card-layout .workspace-split.mod-left-split .workspace-leaf-content:not([data-type="file-explorer"]),
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content {
  --background-primary: var(--cg-card-fg);
  --background-primary-alt: var(--cg-card-fg);
  --background-secondary: var(--cg-card-fg);
  --background-secondary-alt: var(--cg-card-fg);
  background-color: var(--cg-card-fg);
  border: 1px solid var(--cg-card-outline-color);
  border-radius: var(--cg-card-radius);
}

/* Sidebars — forzar fondo card en TODOS los hijos */
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content .view-content,
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content .view-header,
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content .backlink-pane,
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content .outgoing-link-pane,
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content .tree-item-self,
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content .search-result-container,
body.cg-card-layout .workspace-split.mod-left-split .workspace-leaf-content .view-content,
body.cg-card-layout .workspace-split.mod-left-split .workspace-leaf-content .view-header {
  background-color: var(--cg-card-fg);
}
body.cg-card-layout .workspace-split.mod-right-split .workspace-leaf-content .view-header,
body.cg-card-layout .workspace-split.mod-left-split .workspace-leaf-content .view-header {
  border-radius: var(--cg-card-radius) var(--cg-card-radius) 0 0;
}

/* Stacked tabs — sin radius ni borde (ya hay borde en el stacked tab header) */
body.cg-card-layout .workspace-split .mod-stacked .workspace-leaf-content {
  border-radius: 0;
  border: none;
  margin-bottom: 0;
}

/* Stacked tabs — header con borde card */
body.cg-card-layout .workspace .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header {
  border-style: solid;
  border-radius: var(--cg-card-radius) 0 0 var(--cg-card-radius);
  border-width: 1px;
  border-color: var(--cg-card-outline-color);
  border-right: 1px dashed var(--cg-card-outline-color);
}

body.cg-card-layout .workspace .workspace-tabs.mod-stacked .workspace-leaf {
  border-left-width: 0;
  border-top-width: 1px;
  border-bottom-width: 1px;
  border-style: solid;
  border-color: var(--cg-card-outline-color);
  border-radius: 0 var(--cg-card-radius) var(--cg-card-radius) 0;
}

body.cg-card-layout .workspace .workspace-tabs.mod-stacked .workspace-tab-container {
  padding-bottom: var(--cg-card-padding);
}

body.cg-card-layout .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-leaf {
  background-color: var(--cg-bg-primary);
}

/* Horizontal splits */
body.cg-card-layout .workspace-split.mod-horizontal > * {
  width: unset;
}

/* Drop overlay — ajustar al card */
body.cg-card-layout .workspace-drop-overlay:before {
  width: calc(100% - 6px - var(--cg-card-padding) * 2);
  height: calc(100% - 6px - var(--cg-card-padding) * 2);
  margin: auto;
}

/* Card layout — solo el contenido de cada card tiene fondo más claro (legacy — mantenido para compatibilidad) */
body.cg-card-layout .workspace-leaf-content {
  overflow: hidden;
}

/* También el área de texto del editor markdown */
.workspace-leaf-content[data-type="markdown"] .view-content {
  background-color: var(--cg-bg-secondary);
}

/* Modal */
.modal {
  background-color: var(--cg-bg-secondary);
  border: 1px solid rgba(var(--cg-primary-rgb), 0.1);
  border-radius: 8px;
}

/* Status bar — oculta por defecto, visible cuando cg-status-bar está activo */
.status-bar {
  display: none;
  background-color: color-mix(in srgb, var(--cg-bg-secondary) 80%, black);
  color: var(--cg-text-faint);
}
.cg-status-bar .status-bar {
  display: flex;
}
.status-bar .status-bar-item {
  color: var(--cg-primary);
}
.status-bar .status-bar-item svg {
  color: var(--cg-primary);
  stroke: var(--cg-primary);
  --icon-color: var(--cg-primary);
}
.status-bar .status-bar-item:last-child svg {
  color: var(--cg-text-faint);
  stroke: var(--cg-text-faint);
  --icon-color: var(--cg-text-faint);
}

/* Ribbon */
.workspace-ribbon {
  background-color: var(--cg-bg-primary);
}

/* Search */
.search-result-file-title {
  color: var(--cg-primary);
}

.search-result-file-matched-text {
  color: var(--cg-secondary);
  background-color: rgba(var(--cg-secondary-rgb), 0.15);
}

/* Input fields */
input[type="text"],
input[type="search"],
textarea {
  background-color: var(--cg-bg-tertiary);
  border: 1px solid rgba(var(--cg-primary-rgb), 0.1);
  color: var(--cg-text);
  border-radius: 4px;
}

input[type="text"]:focus,
input[type="search"]:focus,
textarea:focus {
  border-color: rgba(var(--cg-primary-rgb), 0.15);
  box-shadow: none;
  outline: none;
}

/* Tooltip */
.tooltip {
  background-color: var(--cg-bg-tertiary);
  color: var(--cg-text);
  border: 1px solid rgba(var(--cg-primary-rgb), 0.1);
}

/* Selection highlight */
::selection {
  background-color: rgba(var(--cg-primary-rgb), 0.2);
}

/* Card layout — file browser */
body.cg-card-filebrowser .nav-files-container {
  padding: 4px;
}
body.cg-card-filebrowser .nav-folder-children {
  background-color: var(--cg-bg-secondary);
  border-radius: 8px;
  padding: 4px;
  margin: 2px 0;
}

/* Card layout — actions panel (ribbon lateral) */
body.cg-card-layout.cg-card-actions .workspace-ribbon.mod-left {
  margin-right: var(--cg-card-padding);
}
body.cg-card-layout.cg-card-actions .side-dock-actions {
  border-radius: 0 var(--cg-card-radius) var(--cg-card-radius) 0;
  margin-top: 2px;
  border-width: 1px 1px 0 1px;
  border-style: solid;
  border-color: var(--cg-card-outline-color);
  background-color: var(--cg-card-fg);
}

/* Card shadows */
.cg-card-shadows .workspace-leaf-content {
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(var(--cg-primary-rgb), 0.04);
}

/* Autohide titlebar — implementación completa (inspirada en AnuPpuccin) */
.cg-autohide-titlebar:not(.is-mobile) {
  --cg-titlebar-delay: 150ms;
  --cg-titlebar-duration: 300ms;
  --cg-titlebar-target-translate-y: 18px;
  --cg-titlebar-translate-y: 40px;
}
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header {
  margin-top: calc(var(--cg-titlebar-translate-y) * -1);
  position: relative;
  transition: transform var(--cg-titlebar-duration) var(--cg-titlebar-delay);
}
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header::before {
  bottom: calc(var(--cg-titlebar-target-translate-y) * -1);
  content: "";
  left: 0;
  position: absolute;
  top: 0;
  transition: transform var(--cg-titlebar-duration) var(--cg-titlebar-delay);
  width: 100%;
  z-index: 0;
}
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header:is(:hover, :focus-within)::before {
  transform: translateY(var(--cg-titlebar-target-translate-y));
}
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header:is(:hover, :focus-within),
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header:is(:hover, :focus-within) + .view-content {
  transform: translateY(var(--cg-titlebar-translate-y));
}
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-content {
  transition: transform var(--cg-titlebar-duration) var(--cg-titlebar-delay);
}
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header-title {
  --file-header-font-size: var(--font-ui-medium);
}
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header > div {
  transition: visibility var(--cg-titlebar-duration) var(--cg-titlebar-delay);
  visibility: visible;
  z-index: 1;
}
.cg-autohide-titlebar:not(.is-mobile) .workspace-leaf-content .view-header:not(:hover, :focus-within) > div {
  visibility: hidden;
}


/* ============================================================
   SECCIÓN 7 — Correcciones y Componentes adicionales
   ============================================================ */

/* Panel derecho — backlinks y outgoing links */
.backlink-pane,
.outgoing-link-pane {
  background-color: var(--cg-bg-primary);
}
.backlink-pane .search-result-file-title,
.outgoing-link-pane .search-result-file-title {
  color: var(--cg-primary);
}
.backlink-pane .search-result-file-match,
.outgoing-link-pane .search-result-file-match {
  color: var(--cg-text-muted);
}
.tree-item-self .tree-item-inner {
  color: var(--cg-text-muted);
}
.tree-item-self:hover .tree-item-inner {
  color: var(--cg-primary);
}
.tree-item-self.is-clickable:hover {
  background-color: rgba(var(--cg-primary-rgb), 0.05);
}

/* Headers de paneles laterales */
.sidebar-section-header {
  color: var(--cg-primary);
}

/* Grafo */
.graph-view.color-fill {
  color: var(--cg-primary);
}
.graph-view.color-fill-highlight {
  color: var(--cg-secondary);
}
.graph-view.color-fill-focused {
  color: var(--cg-active);
}
.graph-view.color-line {
  color: rgba(var(--cg-primary-rgb), 0.15);
}
.graph-view.color-text {
  color: var(--cg-text);
}
.graph-view.color-fill-attachment {
  color: var(--cg-secondary);
}
.graph-view.color-fill-tag {
  color: var(--color-purple);
}
.graph-view.color-fill-unresolved {
  color: var(--cg-text-faint);
}
.graph-view.color-arrow {
  color: rgba(var(--cg-primary-rgb), 0.3);
}

/* View header — parte de la card */
body.cg-card-layout .view-header {
  background-color: var(--cg-bg-secondary);
  border-bottom: 1px solid rgba(var(--cg-primary-rgb), 0.05);
}

/* Breadcrumb / vista de título */
.view-header-title {
  color: var(--cg-text-muted);
}
.view-header-breadcrumb {
  color: var(--cg-text-faint);
}
.view-header-breadcrumb:hover {
  color: var(--cg-primary);
}

/* Settings panel */
.vertical-tab-header-group-title {
  color: var(--cg-primary);
}
.vertical-tab-nav-item {
  color: var(--cg-text-muted);
}
.vertical-tab-nav-item.is-active {
  color: var(--cg-primary);
  background-color: rgba(var(--cg-primary-rgb), 0.1);
}

/* Toggle switches */
.checkbox-container.is-enabled {
  background-color: var(--cg-primary);
}
.checkbox-container {
  background-color: var(--cg-bg-tertiary);
}

/* Dropdown */
.dropdown {
  background-color: var(--cg-bg-tertiary);
  border: 1px solid rgba(var(--cg-primary-rgb), 0.1);
  color: var(--cg-text);
}

/* Sugerencias / Autocomplete */
.suggestion-item {
  color: var(--cg-text);
}
.suggestion-item.is-selected {
  background-color: rgba(var(--cg-primary-rgb), 0.1);
  color: var(--cg-primary);
  border: none;
  border-radius: 6px;
}

/* Prompt / Command palette */
.prompt {
  background-color: var(--cg-bg-secondary);
  border: 1px solid rgba(var(--cg-primary-rgb), 0.08);
}
.prompt-input-container {
  border-radius: var(--radius-l, 8px) var(--radius-l, 8px) 0 0;
}
.prompt-input {
  background-color: var(--cg-bg-tertiary);
  color: var(--cg-text);
  border: 1px solid rgba(var(--cg-primary-rgb), 0.08);
  border-radius: var(--radius-l, 8px) var(--radius-l, 8px) 0 0;
}

.prompt-input:focus {
  border-color: rgba(var(--cg-primary-rgb), 0.15);
  box-shadow: none;
  outline: none;
}

/* Empty state text */
.empty-state-title {
  color: var(--cg-text-faint);
}

/* Inline code */
.cm-inline-code,
.markdown-rendered code:not(pre code) {
  background-color: var(--cg-bg-tertiary);
  color: var(--cg-primary);
  padding: 2px 4px;
  border-radius: 3px;
}

/* Bold y italic — colores base */
strong, .cm-strong { color: var(--cg-text); }
em, .cm-em { color: var(--cg-text); }

/* Bold en color primario */
.cg-colored-bold strong,
.cg-colored-bold .cm-strong {
  color: var(--cg-primary);
}

/* Italic en color activo */
.cg-colored-italic em,
.cg-colored-italic .cm-em {
  color: var(--cg-active);
}

/* Headings con gradiente neon */
.cg-colored-headings .markdown-rendered h1,
.cg-colored-headings .cm-header-1 { color: #00FFFF; }
.cg-colored-headings .markdown-rendered h2,
.cg-colored-headings .cm-header-2 { color: #33CCFF; }
.cg-colored-headings .markdown-rendered h3,
.cg-colored-headings .cm-header-3 { color: #6699FF; }
.cg-colored-headings .markdown-rendered h4,
.cg-colored-headings .cm-header-4 { color: #9966FF; }
.cg-colored-headings .markdown-rendered h5,
.cg-colored-headings .cm-header-5 { color: #CC33FF; }
.cg-colored-headings .markdown-rendered h6,
.cg-colored-headings .cm-header-6 { color: #FF00FF; }

/* Frontmatter / Properties */
.metadata-container {
  background-color: var(--cg-bg-secondary);
  border: 1px solid rgba(var(--cg-primary-rgb), 0.05);
  border-radius: 8px;
}
.metadata-property-key {
  color: var(--cg-text-muted);
}
.metadata-property-value {
  color: var(--cg-text);
}

/* -----------------------------------------------
 *  Embeds y File References
 * ----------------------------------------------- */

/* Archivos embebidos / referencias a archivos */
.internal-embed,
.file-embed {
  background-color: var(--cg-bg-tertiary);
  border: 1px solid rgba(var(--cg-primary-rgb), 0.08);
  border-radius: 6px;
  padding: 4px 8px;
}

.file-embed-link,
.internal-embed .markdown-embed-link {
  color: var(--cg-primary);
}

.file-embed-link:hover {
  color: var(--cg-secondary);
}

/* Icono del archivo embebido */
.file-embed-icon svg {
  color: var(--cg-primary);
  stroke: var(--cg-primary);
}

/* Markdown embed */
.markdown-embed {
  background-color: var(--cg-bg-secondary);
  border: 1px solid rgba(var(--cg-primary-rgb), 0.08);
  border-radius: 8px;
}

.markdown-embed-title {
  color: var(--cg-primary);
}

/* -----------------------------------------------
 *  Callouts — colores semánticos (inglés y español)
 * ----------------------------------------------- */

.callout {
  --callout-color: 0, 255, 255;
  background-color: rgba(var(--callout-color), 0.05);
  border-radius: 8px;
  border: none;
}

.callout-title {
  color: rgb(var(--callout-color));
}

.callout-content {
  color: var(--cg-text);
}

.callout[data-callout="warning"],
.callout[data-callout="caution"],
.callout[data-callout="advertencia"],
.callout[data-callout="precaución"] { --callout-color: 235, 144, 90; }

.callout[data-callout="danger"],
.callout[data-callout="error"],
.callout[data-callout="bug"],
.callout[data-callout="peligro"] { --callout-color: 255, 70, 71; }

.callout[data-callout="tip"],
.callout[data-callout="success"],
.callout[data-callout="hint"],
.callout[data-callout="consejo"],
.callout[data-callout="éxito"] { --callout-color: 75, 209, 86; }

.callout[data-callout="info"],
.callout[data-callout="note"],
.callout[data-callout="nota"],
.callout[data-callout="información"] { --callout-color: 0, 255, 255; }

.callout[data-callout="question"],
.callout[data-callout="pregunta"],
.callout[data-callout="help"] { --callout-color: 139, 135, 255; }

.callout[data-callout="example"],
.callout[data-callout="ejemplo"] { --callout-color: 222, 56, 165; }

.callout[data-callout="quote"],
.callout[data-callout="cite"],
.callout[data-callout="cita"] { --callout-color: 136, 136, 160; }

.callout[data-callout="abstract"],
.callout[data-callout="summary"],
.callout[data-callout="resumen"] { --callout-color: 0, 177, 255; }

/* -----------------------------------------------
 *  Inline Title
 * ----------------------------------------------- */

.inline-title {
  color: var(--cg-text);
}

/* -----------------------------------------------
 *  Sidebar mejorada
 * ----------------------------------------------- */

/* Vault title */
.nav-header .nav-buttons-container {
  border-bottom: 1px solid rgba(var(--cg-primary-rgb), 0.05);
}

/* Folder titles */
.nav-folder-title {
  color: var(--cg-text-muted);
}

.nav-folder-title:hover {
  color: var(--cg-primary);
}

/* Collapse indicator */
.nav-folder-collapse-indicator {
  color: var(--cg-text-faint);
}

/* File titles (no activos) */
.nav-file-title {
  color: var(--cg-text-muted);
}

.nav-file-title:hover {
  color: var(--cg-primary);
  background-color: rgba(var(--cg-primary-rgb), 0.05);
}

/* -----------------------------------------------
 *  Número de línea en bloques de código
 * ----------------------------------------------- */

/* Line numbers del code-styler */
.code-styler-line-number {
  color: var(--cg-text-faint);
}

/* -----------------------------------------------
 *  Mejoras de listas de tareas
 * ----------------------------------------------- */

/* Checkboxes en listas de tareas */
.task-list-item-checkbox:checked {
  background-color: var(--cg-primary);
  border-color: var(--cg-primary);
}

.task-list-item-checkbox {
  border-color: var(--cg-text-faint);
}

/* Texto tachado en tareas completadas */
.task-list-item[data-task="x"] .task-list-item-checkbox ~ * {
  text-decoration: line-through;
  color: var(--cg-text-faint);
}

/* -----------------------------------------------
 *  Progress bars y sliders
 * ----------------------------------------------- */

input[type="range"] {
  accent-color: var(--cg-primary);
}

/* -----------------------------------------------
 *  Notices / Notificaciones
 * ----------------------------------------------- */

.notice {
  background-color: var(--cg-bg-tertiary);
  color: var(--cg-text);
  border: 1px solid rgba(var(--cg-primary-rgb), 0.1);
}

/* -----------------------------------------------
 *  Tab header mejorado
 * ----------------------------------------------- */

/* Barra de tabs — fondo */
.workspace-tab-header-container {
  background-color: var(--cg-bg-primary);
}

/* Icono del tab */
.workspace-tab-header-inner-icon svg {
  color: var(--cg-primary);
  stroke: var(--cg-primary);
}

/* Close button del tab */
.workspace-tab-header-inner-close-button:hover svg {
  color: var(--cg-secondary);
  stroke: var(--cg-secondary);
}

/* -----------------------------------------------
 *  Mejoras del explorador de archivos
 * ----------------------------------------------- */

/* Contador de archivos en carpetas */
.nav-folder-title .nav-folder-title-content .nav-file-tag {
  color: var(--cg-text-faint);
  background-color: rgba(var(--cg-primary-rgb), 0.05);
}

/* Indicador de vault en la parte inferior */
.nav-header-title {
  color: var(--cg-primary);
}

/* ============================================================
   SECCIÓN 8A — Tab Styles: Floating & Minimal
   ============================================================ */

/* --- Custom tab height variable --- */
body.cg-tab-floating,
body.cg-tab-minimal {
  --cg-custom-tab-height: 40px;
  --header-height: var(--cg-custom-tab-height, 40px);
}

/* ---- Floating Tabs (adapted from AnuPuccin Safari-style Animated) ---- */

body.cg-tab-floating .workspace-tabs:not(.mod-stacked) {
  --tab-background: var(--cg-bg-secondary);
  --tab-background-active: var(--cg-bg-primary);
  --tab-font-size: 12px;
  --tab-height: calc(var(--header-height) * 0.7);
  --tab-max-width: 200px;
  --tab-max-width-active: 300px;
}

body.cg-tab-floating .workspace-tabs:not(.mod-stacked) .workspace-tab-header::before,
body.cg-tab-floating .workspace-tabs:not(.mod-stacked) .workspace-tab-header::after {
  display: none;
}

body.cg-tab-floating .mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner,
body.cg-tab-floating .mod-horizontal:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-container-inner {
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
  gap: var(--cg-tab-gap, 10px);
}

body.cg-tab-floating .mod-vertical:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header,
body.cg-tab-floating .mod-horizontal:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
  background: var(--tab-background);
  border-radius: 6px;
  box-shadow: none;
  height: var(--tab-height);
  padding: 0;
  transition: 400ms, background-color 150ms ease-in-out;
  border: 1px solid rgba(var(--cg-primary-rgb), 0.12);
}

body.cg-tab-floating .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header {
  max-width: var(--tab-max-width);
}

body.cg-tab-floating .mod-root:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner {
  padding: 0 4px 0 8px;
  transition: 400ms, background-color 150ms ease-in-out, max-width 400ms;
  color: var(--cg-text-muted);
}

body.cg-tab-floating .mod-root:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner-close-button,
body.cg-tab-floating .mod-root:not(.mod-left-split):not(.mod-right-split) .workspace-tabs:not(.mod-stacked) .workspace-tab-header-inner-icon {
  color: var(--cg-text-muted);
}


body.cg-tab-floating .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active {
  flex-grow: 1.67;
  max-width: var(--tab-max-width-active);
  background-color: var(--cg-bg-primary);
}

body.cg-tab-floating .mod-root .workspace-tabs:not(.mod-stacked).mod-active .workspace-tab-header.is-active .workspace-tab-header-inner-title {
  color: var(--cg-primary);
}

body.cg-tab-floating .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header.is-active .workspace-tab-header-inner-title {
  color: var(--cg-active);
}

body.cg-tab-floating .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-title {
  color: rgba(var(--cg-primary-rgb), 0.5);
}

body.cg-tab-floating .workspace-tab-header:not(.is-active):hover .workspace-tab-header-inner {
  background-color: transparent;
}

body.cg-tab-floating .sidebar-toggle-button.mod-left,
body.cg-tab-floating .sidebar-toggle-button.mod-right {
  align-items: center;
}

body.cg-tab-floating .sidebar-toggle-button.mod-left .clickable-icon,
body.cg-tab-floating .sidebar-toggle-button.mod-right .clickable-icon {
  height: var(--tab-height);
}

/* ---- Minimal Tabs (adapted from AnuPuccin mini-tab style) ---- */

body.cg-tab-minimal {
  --tab-stacked-header-width: 40px;
}

/* Visual alignment: align tabs with card edge */
body.cg-tab-floating .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner,
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner {
  justify-content: flex-start;
}

/* All tabs: fully transparent, no shadow, no border */
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header {
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  border: none;
  padding: 0;
  margin: 0;
  max-width: 200px;
}

/* Kill all pseudo-elements (corner curves, separators) */
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header::before,
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header::after,
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header *::after {
  display: none;
}

/* Active tab: bottom border accent only, no background */
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header.is-active {
  background-color: transparent;
  border-bottom: 2px solid var(--cg-primary);
  margin-bottom: 0;
  padding-bottom: 0;
}

/* Active tab inner: no background, compact */
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header.is-active .workspace-tab-header-inner {
  background-color: transparent;
  border-radius: 0;
  margin-top: 0;
  padding-bottom: 4px;
}

/* Active tab title: accent color */
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header.is-active .workspace-tab-header-inner-title {
  color: var(--cg-primary);
}

/* Hover: very subtle tint, no background */
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header:hover .workspace-tab-header-inner {
  background-color: rgba(var(--cg-primary-rgb), 0.05);
}

/* Inactive tab inner: no background */
body.cg-tab-minimal .workspace-split:not(.mod-left-split):not(.mod-right-split) .workspace-tab-header-container-inner .workspace-tab-header:not(.is-active) .workspace-tab-header-inner {
  background-color: transparent;
}

/* ============================================================
   SECCIÓN 8 — Eliminación de bordes (fuera del card layout)
   ============================================================ */

/* Eliminar bordes laterales del contenido — solo cuando NO hay card layout activo */
body:not(.cg-card-layout) .workspace-leaf-content {
  border: none;
}

body:not(.cg-card-layout) .workspace-leaf {
  border: none;
}

.view-content {
  border: none;
}

body:not(.cg-card-layout) .workspace-split.mod-root .workspace-leaf {
  border: none;
}

.markdown-source-view,
.markdown-reading-view {
  border: none;
}

.cm-editor {
  border: none;
}

/* Quitar focus ring que puede parecer una barra */
body:not(.cg-card-layout) .workspace-leaf.mod-active .workspace-leaf-content {
  border: none;
  box-shadow: none;
}

/* Toggle switches — off state styling */
.checkbox-container:not(.is-enabled) {
  background-color: var(--cg-bg-secondary);
  outline: 1px solid rgba(var(--cg-primary-rgb), 0.3);
  outline-offset: -1px;
}
.checkbox-container:not(.is-enabled) .checkbox-container-thumb {
  background-color: var(--cg-text-faint);
}

/* ============================================================
   SECCIÓN 9 — Card Layout: Tab header refinements
   ============================================================ */

/* Tab header container en card layout — padding y alineación */
body.cg-card-layout .mod-vertical .workspace-tabs .workspace-tab-header-container {
  padding-left: 8px;
}
body.cg-card-layout .mod-vertical .workspace-tabs .workspace-tab-header-container .workspace-tab-header-container-inner {
  margin: 6px -5px calc(var(--tab-outline-width, 1px) * -1);
  z-index: 1;
}

/* Sidebar tabs activos — fondo highlighted */
body.cg-card-layout .mod-left-split .workspace-tab-header.is-active,
body.cg-card-layout .mod-right-split .workspace-tab-header.is-active,
body.cg-card-layout .mod-left-split .workspace-tab-header.has-active-menu,
body.cg-card-layout .mod-right-split .workspace-tab-header.has-active-menu {
  background-color: rgba(var(--cg-primary-rgb), 0.1);
  border-radius: 6px;
}

/* New tab button — empujar a la derecha */
body:not(.cg-card-layout) .workspace-split.mod-vertical .workspace-tab-header-spacer {
  display: none;
}
body:not(.cg-card-layout) .workspace-split.mod-vertical .workspace-tab-header-new-tab {
  margin-left: auto;
}

/* ============================================================
   SECCIÓN 10 — Card Layout: Vault profile en sidebar
   ============================================================ */

body.cg-card-layout .workspace-split.mod-left-split .workspace-sidedock-vault-profile {
  border: none;
  margin: var(--cg-card-padding, 8px);
  margin-bottom: 0;
  background-color: transparent;
}

/* ============================================================
   SECCIÓN 11 — Card Layout: Graph controls en splits laterales
   ============================================================ */

body.cg-card-layout .workspace-split:not(.mod-root) .graph-controls {
  background-color: var(--cg-bg-secondary);
}

/* Style Settings — contenido de sub-headings como card */
.style-settings-heading[data-level="2"] {
  margin-bottom: 4px;
}
.style-settings-heading[data-level="2"] + .style-settings-container {
  background-color: color-mix(in srgb, var(--cg-bg-secondary) 30%, transparent);
  padding: 8px 8px 8px 24px;
  border-radius: 8px;
  border: 1px solid rgba(var(--cg-primary-rgb), 0.06);
  margin-top: 4px;
}
.style-settings-heading[data-level="2"] + .style-settings-container > .setting-item:not(.style-settings-heading) {
  background-color: transparent;
}
.style-settings-heading[data-level="3"] {
  margin-bottom: 4px;
}
.style-settings-heading[data-level="3"] + .style-settings-container {
  background-color: color-mix(in srgb, var(--cg-bg-secondary) 40%, transparent);
  padding: 8px 8px 8px 24px;
  border-radius: 8px;
  border: 1px solid rgba(var(--cg-primary-rgb), 0.06);
  margin-top: 4px;
}
.style-settings-heading[data-level="3"] + .style-settings-container > .setting-item:not(.style-settings-heading) {
  background-color: transparent;
}
.style-settings-heading[data-level="1"] {
  margin-bottom: 4px;
}
.style-settings-heading[data-level="1"] + .style-settings-container {
  background-color: var(--cg-bg-secondary);
  padding: 8px 8px 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(var(--cg-primary-rgb), 0.06);
  margin-top: 4px;
}
.style-settings-heading[data-level="1"] + .style-settings-container > .setting-item:not(.style-settings-heading) {
  background-color: transparent;
}