diff --git a/README.md b/README.md
index dc70192..2e9de41 100644
--- a/README.md
+++ b/README.md
@@ -1,95 +1,21 @@
-This is a sample theme for Obsidian ([https://obsidian.md](https://obsidian.md/)).
+# Xscriptor Theme
-## First Time publishing a theme?
+An elegant Obsidian theme for coders and writers with beautiful EB Garamond typography and flexible customization.
-### Quick start
+
-
+## Features
+- Elegant EB Garamond typography
+- Light & dark color palettes
+- Subtle transparency and frosted-glass effects
+- Enhanced code block readability
+- Style Settings integration for customization
-First, choose **Use this template**. That will create a copy of this repository (repo) under your Github profile. Then, you will want to _clone_ your new repository to your computer.
+## Installation
+- From Obsidian: Settings → Appearance → Community Themes → Search **Xscriptor Theme**
+- Or manually: copy `theme.css` into `.obsidian/themes/Xscriptor Theme/` and select it in Settings → Appearance
-Once you have the repo locally on your computer, there are a couple of placeholder fields you will need to fill in.
+## License
+MIT License
-1. Inside the `manifest.json` file, change the "name" field to whatever you want the name of your theme to be. For example:
-
- ```json
- {
- "name": "Moonstone",
- "version": "0.0.0",
- "minAppVersion": "1.0.0"
- }
- ```
-
-2. Also inside the manifest.json file, you can include your name under next to the "author" field.
-
-After you have those fields configured, all that's left to do is add your styles! All of your CSS needs to be inside the file `theme.css` which is located at root of your repository.
-
-## Adding your theme to the Theme Gallery
-
-### Add a screenshot thumbnail
-
-Inside the repository, include a screenshot thumbnail of your theme. You can name the file anything, for example `screenshot.png`. This image will be used for the small preview in the theme list.
-
-Your screenshot file should be `16:9` aspect ratio.
-The recommended size is 512x288.
-
-### Submit your theme for review
-
-To have your theme included in the Theme Gallery, you will need to submit a Pull Request to [`obsidianmd/obsidian-releases`](https://github.com/obsidianmd/obsidian-releases#community-theme).
-
-## Releasing Versions _(Optional)_
-
-If your theme is getting more and more complex, you might want to start thinking about how your theme will stay compatible with different versions of Obsidian. Introduced in v0.16 of Obsidian, themes support [Github Releases](https://docs.github.com/en/repositories/releasing-projects-on-github/managing-releases-in-a-repository). This means that you can specify which versions of your theme are compatible with which versions of Obsidian.
-
-### Steps for releasing the initial version of your theme (1.0.0)
-
-1. From your theme's repository, click on "Releases".
-
-
-
-2. On the Releases page, there should be a button to **Draft a new Release**. Press it.
-
-
-
-3. Fill out the Release information form.
- - **Choose a Tag**: Type in the name of the version number here. At the bottom of the dropdown should be a button to create a new tag with your latest theme changes. Choose this option.
- 
- - **Release Title**: This can be the version number.
- - **Description** _Optional_: Anything that changed
- - **Files:** The most important part of this form is uploading the files. You can do this by dragging 'n dropping the `manifest.json` file and the `theme.css` file your for theme inside the file upload field.
-
-
-
-4. Click "Publish Release."
-5. Make sure that `versions.json` is set up correctly. This file is a map.
- ```json
- {
- "1.0.0": "0.16.0"
- }
- ```
-
- This means that version 1.0.0 of your theme is compatible with version 0.16.0 of Obsidian. For the initial release of your theme, you shouldn't need to make any changes to this file.
-
-### Steps for releasing new versions
-
-Releasing a new version of your theme is the same as releasing the initial version.
-
-1. From your theme's repository, click on "Releases."
-2. On the Releases page, there should be a button to **Draft a new Release**. Press it.
-3. Fill out the Release information form.
- - **Choose a Tag**: Type in the name of the version number here. At the bottom of the dropdown should be a button to create a new tag with your latest theme changes. Choose this option.
- 
- - **Release Title**: This can be the version number.
- - **Description** _Optional_: Anything that changed
- - **Files:** The most important part of this form is uploading the files. You can do this by dragging 'n dropping the `manifest.json` file and the `theme.css` file your for theme inside the file upload field.
-
-4. Click "Publish Release."
-5. Update the `versions.json` file in your repository. For the initial release of your theme, you probably didn't need to make any changes to the `versions.json` file. When you release subsequent versions of your theme; however, it's best practice to include the new version as entry in the versions.json file. So this might look like:
- ```json
- {
- "1.0.0": "0.16.0",
- "1.0.1": "0.16.0"
- }
- ```
-
- What's important to note here is: the new version is included as the "key" and the "value" is the minimum version of Obsidian that your theme compatible with. So if the new version of your theme is only compatible with an Insider version of Obsidian, it's important to set this value accordingly. This will prevent users on older versions of Obsidian from updating to the newer version of your theme.
+**Created by [Xscriptor](https://xscriptor.com)** · [Report Issues](https://github.com/xscriptordev/obsidian/issues)
diff --git a/manifest.json b/manifest.json
index a3ebe75..52857db 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,10 @@
{
- "name": "Sample Theme",
- "version": "1.0.0",
- "minAppVersion": "1.0.0",
- "author": "Obsidian",
- "authorUrl": "https://obsidian.md"
-}
\ No newline at end of file
+ "id": "xscriptor-theme",
+ "name": "Xscriptor Theme",
+ "version": "1.0.0",
+ "minAppVersion": "0.16.0",
+ "description": "A refined literary-inspired theme for Obsidian, featuring EB Garamond typography and flexible customization for any workspace.",
+ "author": "Xscriptor",
+ "authorUrl": "https://dev.xscriptor.com",
+ "fundingUrl": ""
+}
diff --git a/theme.css b/theme.css
index 2307fc8..179465b 100644
--- a/theme.css
+++ b/theme.css
@@ -1,34 +1,2175 @@
+/* Xscriptor Theme for Obsidian */
+/* X */
+
+/* @settings
+
+name: X Theme Settings
+id: x-theme
+settings:
+ -
+ id: transparency
+ title: Transparencia
+ type: heading
+ level: 2
+ collapsed: true
+ -
+ id: background-opacity
+ title: Opacidad del fondo
+ description: Controla la transparencia de la aplicación
+ type: variable-number-slider
+ default: 0.8
+ min: 0.1
+ max: 1
+ step: 0.1
+ format:
+ -
+ id: mica-effect
+ title: Efecto Pseudo Mica
+ description: Habilita el efecto de vidrio esmerilado (requiere fondo translúcido)
+ type: variable-toggle
+ default: true
+ -
+ id: blur-intensity
+ title: Intensidad del desenfoque
+ description: Controla la intensidad del efecto de desenfoque
+ type: variable-number-slider
+ default: 20
+ min: 5
+ max: 50
+ step: 5
+ format: px
+ -
+ id: colors
+ title: Colores
+ type: heading
+ level: 2
+ collapsed: true
+ -
+ id: accent-color
+ title: Color de acento
+ description: Color principal del tema
+ type: variable-themed-color
+ opacity: true
+ format: hex
+ default-light: '#cc99ff'
+ default-dark: '#cc99ff'
+ -
+ id: h1-color
+ title: Color de títulos H1
+ type: variable-themed-color
+ format: hex
+ default-light: '#8b0000'
+ default-dark: '#cd919e'
+ -
+ id: h2-color
+ title: Color de títulos H2
+ type: variable-themed-color
+ format: hex
+ default-light: '#b8860b'
+ default-dark: '#daa520'
+ -
+ id: h3-color
+ title: Color de títulos H3
+ type: variable-themed-color
+ format: hex
+ default-light: '#2e8b57'
+ default-dark: '#8fbc8f'
+ -
+ id: italic-color
+ title: Color de texto en cursiva
+ type: variable-themed-color
+ format: hex
+ default-light: '#8b4513'
+ default-dark: '#8be3eb'
+ -
+ id: typography
+ title: Tipografía
+ type: heading
+ level: 2
+ collapsed: true
+ -
+ id: font-size
+ title: Tamaño de fuente
+ description: Tamaño base de la fuente
+ type: variable-number-slider
+ default: 16
+ min: 12
+ max: 24
+ step: 1
+ format: px
+ -
+ id: line-height
+ title: Altura de línea
+ description: Espaciado entre líneas
+ type: variable-number-slider
+ default: 1.6
+ min: 1.2
+ max: 2.0
+ step: 0.1
+ format:
+ -
+ id: interface
+ title: Interfaz
+ type: heading
+ level: 2
+ collapsed: true
+ -
+ id: border-radius
+ title: Radio de bordes
+ description: Redondez de los elementos
+ type: variable-number-slider
+ default: 8
+ min: 0
+ max: 20
+ step: 1
+ format: px
+ -
+ id: folder-colors
+ title: Colores de carpetas
+ description: Habilitar colores en las carpetas
+ type: class-toggle
+ default: true
+
+*/
+
+/* Definir fuentes EB Garamond locales */
+@font-face {
+ font-family: 'EB Garamond';
+ src: url('fonts/EBGaramond-VariableFont_wght.ttf') format('truetype');
+ font-weight: 400 700;
+ font-style: normal;
+ font-display: swap;
+}
+
+@font-face {
+ font-family: 'EB Garamond';
+ src: url('fonts/EBGaramond-Italic-VariableFont_wght.ttf') format('truetype');
+ font-weight: 400 700;
+ font-style: italic;
+ font-display: swap;
+}
+
+/* Variables CSS para el tema */
+:root {
+ /* Style Settings Variables */
+ --background-opacity: 0.8;
+ --mica-effect: 1;
+ --blur-intensity: 20px;
+ --accent-color: #cc99ff;
+ --h1-color: #8b0000;
+ --h2-color: #b8860b;
+ --h3-color: #2e8b57;
+ --italic-color: #8b4513;
+ --font-size: 16px;
+ --line-height: 1.6;
+ --border-radius: 8px;
+}
+
+/* =================================================================
+ PSEUDO MICA EFFECT & PLUGIN SUPPORT
+ ================================================================= */
+
+/* Pseudo Mica Plugin Support */
+/* These classes are used by the Pseudo Mica plugin for Obsidian */
+.pseudo-mica-enabled,
+.pseudo-mica-active {
+ background: transparent !important;
+}
+
+.pseudo-mica-enabled .workspace,
+.pseudo-mica-active .workspace {
+ background: rgba(var(--background-primary-rgb), var(--background-opacity, 0.8)) !important;
+ backdrop-filter: blur(var(--blur-intensity, 20px));
+ -webkit-backdrop-filter: blur(var(--blur-intensity, 20px));
+}
+
+.pseudo-mica-enabled .workspace-leaf-content,
+.pseudo-mica-active .workspace-leaf-content {
+ background: rgba(var(--background-secondary-rgb), calc(var(--background-opacity, 0.8) * 0.9)) !important;
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.7));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.7));
+}
+
+.pseudo-mica-enabled .workspace-drawer,
+.pseudo-mica-active .workspace-drawer {
+ background: rgba(var(--background-secondary-rgb), calc(var(--background-opacity, 0.8) * 0.85)) !important;
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.8));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.8));
+}
+
+.pseudo-mica-enabled .titlebar,
+.pseudo-mica-active .titlebar {
+ background: rgba(var(--background-primary-rgb), calc(var(--background-opacity, 0.8) * 0.7)) !important;
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.9));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.9));
+}
+
+.pseudo-mica-enabled .status-bar,
+.pseudo-mica-active .status-bar {
+ background: rgba(var(--background-secondary-rgb), calc(var(--background-opacity, 0.8) * 0.8)) !important;
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.7));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.7));
+}
+
+.pseudo-mica-enabled .workspace-tab-header-container,
+.pseudo-mica-active .workspace-tab-header-container {
+ background: rgba(var(--background-secondary-rgb), calc(var(--background-opacity, 0.8) * 0.6)) !important;
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.6));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.6));
+}
+
+.pseudo-mica-enabled .modal,
+.pseudo-mica-active .modal {
+ background: rgba(var(--background-primary-rgb), calc(var(--background-opacity, 0.8) * 0.95)) !important;
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 1.2));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 1.2));
+ border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+.pseudo-mica-enabled .menu,
+.pseudo-mica-active .menu {
+ background: rgba(var(--background-secondary-rgb), calc(var(--background-opacity, 0.8) * 0.9)) !important;
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.8));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * 0.8));
+ border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+/* Custom mica effect base styles (for manual activation) */
+.mica-enabled {
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1)));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1)));
+}
+
+/* Apply mica effect to main containers when enabled */
+body:has(.mica-toggle:checked) .workspace,
+body.mica-effect .workspace {
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1)));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1)));
+}
+
+body:has(.mica-toggle:checked) .workspace-leaf-content,
+body.mica-effect .workspace-leaf-content {
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.7));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.7));
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+body:has(.mica-toggle:checked) .workspace-split.mod-vertical > .workspace-leaf:first-of-type .workspace-leaf-content,
+body.mica-effect .workspace-split.mod-vertical > .workspace-leaf:first-of-type .workspace-leaf-content {
+ border-right: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+body:has(.mica-toggle:checked) .workspace-split.mod-horizontal > .workspace-leaf:first-of-type .workspace-leaf-content,
+body.mica-effect .workspace-split.mod-horizontal > .workspace-leaf:first-of-type .workspace-leaf-content {
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Sidebar mica effect */
+body:has(.mica-toggle:checked) .workspace-drawer,
+body.mica-effect .workspace-drawer {
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.8));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.8));
+ border-right: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Tab bar mica effect */
+body:has(.mica-toggle:checked) .workspace-tab-header-container,
+body.mica-effect .workspace-tab-header-container {
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.6));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.6));
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Title bar mica effect */
+body:has(.mica-toggle:checked) .titlebar,
+body.mica-effect .titlebar {
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.9));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.9));
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Status bar mica effect */
+body:has(.mica-toggle:checked) .status-bar,
+body.mica-effect .status-bar {
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.7));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.7));
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Modal and popup mica effect */
+body:has(.mica-toggle:checked) .modal,
+body.mica-effect .modal {
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 1.2));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 1.2));
+ border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+body:has(.mica-toggle:checked) .suggestion-container,
+body.mica-effect .suggestion-container {
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1)));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1)));
+ border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+/* Menu mica effect */
+body:has(.mica-toggle:checked) .menu,
+body.mica-effect .menu {
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.8));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.8));
+ border: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+/* Enhanced glass effect for cards and panels */
+body:has(.mica-toggle:checked) .callout,
+body.mica-effect .callout {
+ backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.5));
+ -webkit-backdrop-filter: blur(calc(var(--blur-intensity, 20px) * var(--mica-effect, 1) * 0.5));
+ border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* Disable mica when not supported or disabled */
+@supports not (backdrop-filter: blur(1px)) {
+ .mica-enabled,
+ body:has(.mica-toggle:checked) .workspace,
+ body.mica-effect .workspace,
+ body:has(.mica-toggle:checked) .workspace-leaf-content,
+ body.mica-effect .workspace-leaf-content {
+ backdrop-filter: none;
+ -webkit-backdrop-filter: none;
+ }
+}
+
+.theme-light {
+ /* Style Settings Variables - Light Mode */
+ --accent-color: var(--accent-color, #cc99ff);
+ --h1-color: var(--h1-color, #8b0000);
+ --h2-color: var(--h2-color, #b8860b);
+ --h3-color: var(--h3-color, #2e8b57);
+ --italic-color: var(--italic-color, #8b4513);
+
+ /* RGB Variables for Pseudo Mica Plugin */
+ --background-primary-rgb: 255, 255, 255;
+ --background-secondary-rgb: 248, 249, 250;
+ /* Colores principales - Modo Claro */
+ --background-primary: #ffffff;
+ --background-primary-alt: #f8f9fa;
+ --background-secondary: #f1f3f4;
+ --background-secondary-alt: #e8eaed;
+ --background-accent: #ffffff;
+ --background-modifier-border: #dadce0;
+ --background-modifier-form-field: #ffffff;
+ --background-modifier-form-field-highlighted: #f8f9fa;
+ --background-modifier-box-shadow: rgba(0, 0, 0, 0.1);
+ --background-modifier-success: #d4edda;
+ --background-modifier-error: #f8d7da;
+ --background-modifier-error-rgb: 248, 215, 218;
+ --background-modifier-error-hover: #f5c6cb;
+ --background-modifier-cover: rgba(0, 0, 0, 0.8);
+
+ /* Colores de texto - Modo Claro */
+ --text-normal: #202124;
+ --text-muted: #5f6368;
+ --text-faint: #9aa0a6;
+ --text-accent: #cc99ff;
+ --text-accent-hover: #99c2ff;
+ --text-on-accent: #ffffff;
+ --text-error: #d93025;
+ --text-warning: #f9ab00;
+ --text-success: #137333;
+
+ /* Colores para títulos jerárquicos - Modo Claro */
+ --h1-color: #8b0000; /* Rojo oscuro */
+ --h2-color: #b8860b; /* Dorado oscuro */
+ --h3-color: #2e8b57; /* Verde mar */
+ --h4-color: #4682b4; /* Azul acero */
+ --h5-color: #9932cc; /* Violeta oscuro */
+ --h6-color: #696969; /* Gris oscuro */
+
+ /* Color para texto en cursiva - Modo Claro */
+ --italic-color: #8b4513; /* Azul cian */
+
+ /* Bordes - Variaciones de grises */
+ --border-color: #dadce0;
+ --border-color-hover: #bdc1c6;
+ --border-color-focus: #9aa0a6;
+ --divider-color: #e8eaed;
+ --divider-color-hover: #dadce0;
+
+ /* Colores interactivos */
+ --interactive-normal: #f8f9fa;
+ --interactive-hover: #f1f3f4;
+ --interactive-accent: #1a73e8;
+ --interactive-accent-hover: #1557b0;
+ --interactive-success: #137333;
+
+ /* Colores para callouts - Modo Claro */
+ --callout-info: #e3f2fd;
+ --callout-info-border: #2196f3;
+ --callout-info-text: #0d47a1;
+ --callout-warning: #fff3e0;
+ --callout-warning-border: #ff9800;
+ --callout-warning-text: #e65100;
+ --callout-error: #ffebee;
+ --callout-error-border: #f44336;
+ --callout-error-text: #c62828;
+ --callout-success: #e8f5e8;
+ --callout-success-border: #4caf50;
+ --callout-success-text: #2e7d32;
+ --callout-tip: #f3e5f5;
+ --callout-tip-border: #9c27b0;
+ --callout-tip-text: #6a1b9a;
+ --callout-note: #f5f5f5;
+ --callout-note-border: #757575;
+ --callout-note-text: #424242;
+
+ /* Colores para tags - Modo Claro */
+ --tag-background: #e8f0fe;
+ --tag-text: #1565c0;
+ --tag-border: #bbdefb;
+
+ /* Colores para highlights - Modo Claro */
+ --highlight-yellow: #fff59d;
+ --highlight-green: #c8e6c9;
+ --highlight-blue: #bbdefb;
+ --highlight-pink: #f8bbd9;
+ --highlight-purple: #e1bee7;
+
+ /* Colores para tablas - Modo Claro */
+ --table-header-background: #f5f5f5;
+ --table-row-even: #fafafa;
+ --table-row-odd: #ffffff;
+ --table-border-color: #e0e0e0;
+
+ /* Interface element variables - Modo Claro */
+ --radius-xl: calc(var(--border-radius, 8px) * 2);
+ --radius-l: calc(var(--border-radius, 8px) * 1.26);
+ --radius-m: var(--border-radius, 8px);
+ --radius-s: calc(var(--border-radius, 8px) * 0.5);
+ --card-color: #ffffff;
+ --select-color: #ffffff;
+ --input-color: #f8f9fa;
+}
+
+/* Estilos específicos para modo claro */
+.theme-light {
+ /* Pestañas del workspace */
+ .workspace-tab-header {
+ background-color: var(--card-color) !important;
+ border: 1px solid #2a2a2a;
+ border-radius: var(--radius-xl);
+ padding: 4px 16px;
+ }
+
+ /* Workspace tab containers */
+ .workspace
+ .mod-root
+ .workspace-tabs.mod-stacked
+ .workspace-tab-container
+ .workspace-tab-header {
+ border-radius: var(--radius-xl) 0 0 var(--radius-xl);
+ background: var(--card-color) !important;
+ color: var(--text-normal);
+ border: 1px solid #2a2a2a;
+ box-shadow: -24px 0px 56px rgba(42, 42, 42, 0.1);
+ }
+
+ .workspace-split.mod-root .view-content {
+ background-color: var(--background-primary);
+ border-radius: var(--radius-xl);
+ }
+
+ .view-header {
+ border-radius: var(--radius-xl);
+ margin: 0 0 8px 0;
+ background-color: var(--card-color);
+ }
+
+ /* Workspace leaf content */
+ .workspace-split .workspace-leaf-content:not([data-type="file-explorer"]) {
+ background-color: var(--card-color);
+ border-radius: var(--radius-xl);
+ border: 1px solid #2a2a2a;
+ }
+
+ .mod-root .workspace-tabs .workspace-leaf {
+ background-color: var(--card-color);
+ border-radius: var(--radius-xl);
+ padding: 8px;
+ border: 1px solid #2a2a2a;
+ }
+
+ .mod-left-split .workspace-tab-header,
+ .mod-right-split .workspace-tab-header {
+ border: 1px solid #2a2a2a;
+ border-radius: var(--radius-m);
+ background-color: var(--card-color);
+ }
+
+ /* Menús contextuales */
+ .menu,
+ .suggestion-container,
+ .modal {
+ background-color: var(--card-color) !important;
+ border: 2px solid #2a2a2a;
+ border-radius: var(--radius-xl);
+ }
+
+ /* Sugerencias */
+ .suggestion-container {
+ background-color: var(--card-color) !important;
+ border: 2px solid #2a2a2a;
+ border-radius: var(--radius-xl);
+ }
+
+ /* Modales */
+ .modal-bg {
+ background-color: rgba(42, 42, 42, 0.8);
+ }
+
+ .modal {
+ border: 2px solid #2a2a2a;
+ border-radius: var(--radius-xl);
+ }
+
+ .modal-sidebar {
+ background-color: var(--card-color);
+ border-radius: var(--radius-xl);
+ }
+
+ /* Dropdowns y selects */
+ select,
+ .dropdown {
+ background-color: var(--select-color);
+ border: 1px solid #2a2a2a;
+ border-radius: var(--radius-xl);
+ color: var(--text-normal);
+ padding: 8px 10.1px;
+ }
+
+ select:hover,
+ .dropdown:hover,
+ select:focus,
+ .dropdown:focus {
+ background-color: var(--select-color);
+ border-color: var(--text-accent);
+ box-shadow: none;
+ }
+
+ /* Checkbox containers */
+ .checkbox-container {
+ background-color: var(--select-color);
+ border-radius: var(--radius-m);
+ }
+
+ /* Metadata containers */
+ .metadata-container .metadata-add-button {
+ border-radius: var(--radius-xl);
+ background: var(--card-color);
+ padding: 0 16px 0 8px;
+ margin-top: 1em;
+ border: 1px solid #2a2a2a;
+ }
+
+ /* Vertical tab headers */
+ .vertical-tab-header {
+ background-color: var(--card-color);
+ border-radius: var(--radius-m);
+ }
+
+ /* Community items */
+ .community-item {
+ border-radius: var(--radius-xl);
+ border: 1px solid #2a2a2a;
+ }
+
+ /* Input de búsqueda */
+ input[type="search"] {
+ background-color: var(--input-color);
+ border-radius: var(--radius-xl);
+ border: 1px solid #2a2a2a;
+ }
+
+ /* Mantener bordes grises muy oscuros */
+ .workspace-leaf,
+ .workspace-split,
+ .nav-folder-title,
+ .nav-file-title,
+ .workspace-tab-header {
+ border-color: #2a2a2a !important;
+ }
+}
+
+.theme-dark {
+ /* Style Settings Variables - Dark Mode */
+ --accent-color: var(--accent-color, #cc99ff);
+ --h1-color: var(--h1-color, #cd919e);
+ --h2-color: var(--h2-color, #daa520);
+ --h3-color: var(--h3-color, #8fbc8f);
+ --italic-color: var(--italic-color, #8be3eb);
+
+ /* RGB Variables for Pseudo Mica Plugin */
+ --background-primary-rgb: 10, 10, 10;
+ --background-secondary-rgb: 18, 18, 18;
+
+ /* Colores principales - Modo Oscuro (Versión Luminosa) */
+ --background-primary: rgba(10, 10, 10, var(--background-opacity, 0.8));
+ --background-primary-alt: rgba(15, 15, 15, var(--background-opacity, 0.8));
+ --background-secondary: rgba(18, 18, 18, var(--background-opacity, 0.8));
+ --background-secondary-alt: rgba(21, 21, 21, var(--background-opacity, 0.8));
+ --background-accent: rgba(10, 10, 10, var(--background-opacity, 0.8));
+ --background-modifier-border: #404040;
+ --background-modifier-form-field: rgba(0, 0, 0, var(--background-opacity, 0.8));
+ --background-modifier-form-field-highlighted: rgba(0, 0, 0, var(--background-opacity, 0.8));
+ --background-modifier-box-shadow: rgba(0, 0, 0, 0.3);
+ --background-modifier-success: #8fbc8f;
+ --background-modifier-error: #cd919e;
+ --background-modifier-error-rgb: 205, 145, 158;
+ --background-modifier-error-hover: #cd919e;
+ --background-modifier-cover: rgba(0, 0, 0, 0.9);
+
+ /* Colores de texto - Modo Oscuro (Versión Luminosa) */
+ --text-normal: #ffffff;
+ --text-muted: #d0d0d0;
+ --text-faint: #a0a0a0;
+ --text-accent: #cc99ff;
+ --text-accent-hover: #cc99ff;
+ --text-on-accent: #000000;
+ --text-error: #cd919e;
+ --text-warning: #daa520;
+ --text-success: #8fbc8f;
+
+ /* Colores para títulos jerárquicos - Modo Oscuro (Versión Luminosa) */
+ --h1-color: #cd919e; /* Rosa vintage apagado */
+ --h2-color: #daa520; /* Dorado vintage */
+ --h3-color: #8fbc8f; /* Verde salvia vintage */
+ --h4-color: #5f9ea0; /* Azul cadete vintage */
+ --h5-color: #9370db; /* Violeta medio vintage */
+ --h6-color: #cd853f; /* Marrón dorado vintage */
+
+ /* Color para texto en cursiva - Modo Oscuro (Versión Luminosa) */
+ --italic-color: #8be3eb; /* Azul cian */
+
+ /* Folder color variables */
+ --color-red-rgb: 205, 145, 158;
+ --color-orange-rgb: 205, 133, 63;
+ --color-yellow-rgb: 218, 165, 32;
+ --color-green-rgb: 143, 188, 143;
+ --color-cyan-rgb: 95, 158, 160;
+ --color-blue-rgb: 95, 158, 160;
+ --color-purple-rgb: 147, 112, 219;
+ --color-pink-rgb: 205, 145, 158;
+
+ /* Interface element variables */
+ --radius-xl: calc(var(--border-radius, 8px) * 2);
+ --radius-l: calc(var(--border-radius, 8px) * 1.26);
+ --radius-m: var(--border-radius, 8px);
+ --radius-s: calc(var(--border-radius, 8px) * 0.5);
+ --card-color: rgba(0, 0, 0, var(--background-opacity, 0.8));
+ --select-color: rgba(0, 0, 0, var(--background-opacity, 0.8));
+ --input-color: rgba(10, 10, 10, var(--background-opacity, 0.8));
+ --table-border-color: #555555;
+
+ /* Bordes - Variaciones de grises */
+ --border-color: #404040;
+ --border-color-hover: #505050;
+ --border-color-focus: #707070;
+ --divider-color: #303030;
+ --divider-color-hover: #404040;
+
+ /* Colores interactivos (Versión Luminosa) */
+ --interactive-normal: rgba(0, 0, 0, 0.8);
+ --interactive-hover: rgba(32, 32, 32, 0.8);
+ --interactive-accent: #ffd700;
+ --interactive-accent-hover: #ffd700;
+ --interactive-success: #90ff9f;
+
+ /* Colores para callouts - Modo Oscuro */
+ --callout-info: #1a2332;
+ --callout-info-border: #64b5f6;
+ --callout-info-text: #90caf9;
+ --callout-warning: #2d2416;
+ --callout-warning-border: #ffb74d;
+ --callout-warning-text: #ffcc02;
+ --callout-error: #2d1b1b;
+ --callout-error-border: #ef5350;
+ --callout-error-text: #ffcdd2;
+ --callout-success: #1b2d1b;
+ --callout-success-border: #66bb6a;
+ --callout-success-text: #c8e6c9;
+ --callout-tip: #2d1b2d;
+ --callout-tip-border: #ba68c8;
+ --callout-tip-text: #e1bee7;
+ --callout-note: #1f1f1f;
+ --callout-note-border: #9e9e9e;
+ --callout-note-text: #e0e0e0;
+
+ /* Colores para tags - Modo Oscuro */
+ --tag-background: #1a2332;
+ --tag-text: #90caf9;
+ --tag-border: #42a5f5;
+
+ /* Colores para highlights - Modo Oscuro */
+ --highlight-yellow: #4a4a1a;
+ --highlight-green: #1a4a1a;
+ --highlight-blue: #1a1a4a;
+ --highlight-pink: #4a1a4a;
+ --highlight-purple: #3a1a4a;
+
+ /* Colores para tablas - Modo Oscuro */
+ --table-header-background: #1f1f1f;
+ --table-row-even: #151515;
+ --table-row-odd: #0a0a0a;
+ --table-border-color: #404040;
+}
+
+/* Estilos específicos para modo oscuro */
+.theme-dark {
+ /* Pestañas del workspace */
+ .workspace-tab-header {
+ background-color: var(--card-color) !important;
+ border: 1px solid #555555;
+ border-radius: var(--radius-xl);
+ padding: 4px 16px;
+ }
+
+ /* Workspace tab containers */
+ .workspace
+ .mod-root
+ .workspace-tabs.mod-stacked
+ .workspace-tab-container
+ .workspace-tab-header {
+ border-radius: var(--radius-xl) 0 0 var(--radius-xl);
+ background: var(--card-color) !important;
+ color: var(--text-normal);
+ border: 1px solid #555555;
+ box-shadow: -24px 0px 56px rgba(85, 85, 85, 0.1);
+ }
+
+ .workspace-split.mod-root .view-content {
+ background-color: var(--background-primary);
+ border-radius: var(--radius-xl);
+ }
+
+ .view-header {
+ border-radius: var(--radius-xl);
+ margin: 0 0 8px 0;
+ background-color: var(--card-color);
+ }
+
+ /* Workspace leaf content */
+ .workspace-split .workspace-leaf-content:not([data-type="file-explorer"]) {
+ background-color: var(--card-color);
+ border-radius: var(--radius-xl);
+ border: 1px solid #555555;
+ }
+
+ .mod-root .workspace-tabs .workspace-leaf {
+ background-color: var(--card-color);
+ border-radius: var(--radius-xl);
+ padding: 8px;
+ border: 1px solid #555555;
+ }
+
+ .mod-left-split .workspace-tab-header,
+ .mod-right-split .workspace-tab-header {
+ border: 1px solid #555555;
+ border-radius: var(--radius-m);
+ background-color: var(--card-color);
+ }
+
+ /* Menús contextuales */
+ .menu,
+ .suggestion-container,
+ .modal {
+ background-color: var(--card-color) !important;
+ border: 2px solid #555555;
+ border-radius: var(--radius-xl);
+ }
+
+ /* Sugerencias */
+ .suggestion-container {
+ background-color: var(--card-color) !important;
+ border: 2px solid #555555;
+ border-radius: var(--radius-xl);
+ }
+
+ /* Modales */
+ .modal-bg {
+ background-color: rgba(85, 85, 85, 0.8);
+ }
+
+ .modal {
+ border: 2px solid #555555;
+ border-radius: var(--radius-xl);
+ }
+
+ .modal-sidebar {
+ background-color: var(--card-color);
+ border-radius: var(--radius-xl);
+ }
+
+ /* Dropdowns y selects */
+ select,
+ .dropdown {
+ background-color: var(--select-color);
+ border: 1px solid #555555;
+ border-radius: var(--radius-xl);
+ color: var(--text-normal);
+ padding: 8px 10.1px;
+ }
+
+ select:hover,
+ .dropdown:hover,
+ select:focus,
+ .dropdown:focus {
+ background-color: var(--select-color);
+ border-color: var(--text-accent);
+ box-shadow: none;
+ }
+
+ /* Checkbox containers */
+ .checkbox-container {
+ background-color: var(--select-color);
+ border-radius: var(--radius-m);
+ }
+
+ /* Metadata containers */
+ .metadata-container .metadata-add-button {
+ border-radius: var(--radius-xl);
+ background: var(--card-color);
+ padding: 0 16px 0 8px;
+ margin-top: 1em;
+ border: 1px solid #555555;
+ }
+
+ /* Vertical tab headers */
+ .vertical-tab-header {
+ background-color: var(--card-color);
+ border-radius: var(--radius-m);
+ }
+
+ /* Community items */
+ .community-item {
+ border-radius: var(--radius-xl);
+ border: 1px solid #555555;
+ }
+
+ /* Input de búsqueda */
+ input[type="search"] {
+ background-color: var(--input-color);
+ border-radius: var(--radius-xl);
+ border: 1px solid #555555;
+ }
+
+ /* Mantener bordes grises */
+ .workspace-leaf,
+ .workspace-split,
+ .nav-folder-title,
+ .nav-file-title,
+ .workspace-tab-header {
+ border-color: #555555 !important;
+ }
+}
+
+/* Configuración global de fuente */
body {
- --radius-s: 0px;
- --radius-m: 0px;
- --radius-l: 0px;
- --input-radius: 0px;
- --tab-radius-active: 0px;
- --checkbox-radius: 0px;
- --toggle-radius: 0px;
- --toggle-thumb-radius: 0px;
- --slider-thumb-radius: 0px;
+ font-family: 'EB Garamond', Georgia, serif !important;
+ font-size: var(--font-size, 16px);
+ line-height: var(--line-height, 1.6);
+ --font-text: 'EB Garamond', Georgia, serif;
+ --font-interface: 'EB Garamond', Georgia, serif;
+ --font-monospace: 'Courier New', monospace;
}
-.workspace-tab-header.is-active::before, .workspace-tab-header.is-active::after {
- display: none;
+/* Estilos para títulos jerárquicos */
+h1, .cm-header-1 {
+ color: var(--h1-color) !important;
+ font-weight: 700;
}
-svg * {
- stroke-linecap: square;
- stroke-linejoin: miter;
- rx: 0;
- ry: 0;
+h2, .cm-header-2 {
+ color: var(--h2-color) !important;
+ font-weight: 600;
}
+h3, .cm-header-3 {
+ color: var(--h3-color) !important;
+ font-weight: 600;
+}
+
+h4, .cm-header-4 {
+ color: var(--h4-color, var(--h3-color)) !important;
+ font-weight: 500;
+}
+
+h5, .cm-header-5 {
+ color: var(--h5-color, var(--h3-color)) !important;
+ font-weight: 500;
+}
+
+h6, .cm-header-6 {
+ color: var(--h6-color, var(--h3-color)) !important;
+ font-weight: 400;
+}
+
+/* Estilos para texto en cursiva */
+em, i, .cm-em {
+ color: var(--italic-color) !important;
+ font-style: italic;
+}
+
+/* Folder icons styles */
+body:not(.folder-colors) .nav-files-container {
+ /* Disable folder colors when toggle is off */
+ & > div > .nav-folder > .tree-item-self,
+ & .nav-folder-children .nav-folder > .tree-item-self {
+ border-left: none !important;
+ }
+
+ & > div > .nav-folder .tree-item-children,
+ & .nav-folder-children .nav-folder .tree-item-children {
+ border-left-color: var(--background-modifier-border) !important;
+ }
+}
+
+.pln-folder-icons {
+ /* Make all folder chevrons into icons */
+ & .nav-files-container > div > .nav-folder .collapse-icon svg {
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-folder-open'%3E%3Cpath d='m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2'/%3E%3C/svg%3E");
+ color: var(--text-muted);
+ background-color: var(--text-muted);
+ }
+
+ /* Collapsed folder icons */
+ & .nav-files-container > div > .nav-folder .collapse-icon.is-collapsed svg {
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='4' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-folder'%3E%3Cpath d='M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'/%3E%3C/svg%3E");
+ color: var(--text-muted);
+ background-color: var(--text-muted);
+ }
+}
+
+/* Folder navigation styles */
+/* Colorful folder borders - Nivel 1 (Carpetas principales) */
+.nav-files-container > div > .nav-folder:nth-child(8n+1) > .tree-item-self {
+ border-left: 3px solid #ff6b6b !important; /* Rojo coral */
+}
+.nav-files-container > div > .nav-folder:nth-child(8n+1) .tree-item-children {
+ --nav-indentation-guide-color: #ff6b6b;
+ border-left-color: #ff6b6b !important;
+}
+
+.nav-files-container > div > .nav-folder:nth-child(8n+2) > .tree-item-self {
+ border-left: 3px solid #4ecdc4 !important; /* Turquesa */
+}
+.nav-files-container > div > .nav-folder:nth-child(8n+2) .tree-item-children {
+ --nav-indentation-guide-color: #4ecdc4;
+ border-left-color: #4ecdc4 !important;
+}
+
+.nav-files-container > div > .nav-folder:nth-child(8n+3) > .tree-item-self {
+ border-left: 3px solid #45b7d1 !important; /* Azul cielo */
+}
+.nav-files-container > div > .nav-folder:nth-child(8n+3) .tree-item-children {
+ --nav-indentation-guide-color: #45b7d1;
+ border-left-color: #45b7d1 !important;
+}
+
+.nav-files-container > div > .nav-folder:nth-child(8n+4) > .tree-item-self {
+ border-left: 3px solid #f7b731 !important; /* Amarillo dorado */
+}
+.nav-files-container > div > .nav-folder:nth-child(8n+4) .tree-item-children {
+ --nav-indentation-guide-color: #f7b731;
+ border-left-color: #f7b731 !important;
+}
+
+.nav-files-container > div > .nav-folder:nth-child(8n+5) > .tree-item-self {
+ border-left: 3px solid #5f27cd !important; /* Púrpura */
+}
+.nav-files-container > div > .nav-folder:nth-child(8n+5) .tree-item-children {
+ --nav-indentation-guide-color: #5f27cd;
+ border-left-color: #5f27cd !important;
+}
+
+.nav-files-container > div > .nav-folder:nth-child(8n+6) > .tree-item-self {
+ border-left: 3px solid #00d2d3 !important; /* Cian brillante */
+}
+.nav-files-container > div > .nav-folder:nth-child(8n+6) .tree-item-children {
+ --nav-indentation-guide-color: #00d2d3;
+ border-left-color: #00d2d3 !important;
+}
+
+.nav-files-container > div > .nav-folder:nth-child(8n+7) > .tree-item-self {
+ border-left: 3px solid #ff9ff3 !important; /* Rosa claro */
+}
+.nav-files-container > div > .nav-folder:nth-child(8n+7) .tree-item-children {
+ --nav-indentation-guide-color: #ff9ff3;
+ border-left-color: #ff9ff3 !important;
+}
+
+.nav-files-container > div > .nav-folder:nth-child(8n+8) > .tree-item-self {
+ border-left: 3px solid #26de81 !important; /* Verde menta */
+}
+.nav-files-container > div > .nav-folder:nth-child(8n+8) .tree-item-children {
+ --nav-indentation-guide-color: #26de81;
+ border-left-color: #26de81 !important;
+}
+
+/* Colorful folder borders - Nivel 2 (Subcarpetas directas) */
+.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+1) > .tree-item-self {
+ border-left: 2px solid #ff7675 !important; /* Rojo suave */
+}
+.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+1) .tree-item-children {
+ --nav-indentation-guide-color: #ff7675;
+ border-left-color: #ff7675 !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+2) > .tree-item-self {
+ border-left: 2px solid #74b9ff !important; /* Azul francés */
+}
+.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+2) .tree-item-children {
+ --nav-indentation-guide-color: #74b9ff;
+ border-left-color: #74b9ff !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+3) > .tree-item-self {
+ border-left: 2px solid #55a3ff !important; /* Azul brillante */
+}
+.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+3) .tree-item-children {
+ --nav-indentation-guide-color: #55a3ff;
+ border-left-color: #55a3ff !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+4) > .tree-item-self {
+ border-left: 2px solid #a29bfe !important; /* Lavanda */
+}
+.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+4) .tree-item-children {
+ --nav-indentation-guide-color: #a29bfe;
+ border-left-color: #a29bfe !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+5) > .tree-item-self {
+ border-left: 2px solid #fd79a8 !important; /* Rosa intenso */
+}
+.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+5) .tree-item-children {
+ --nav-indentation-guide-color: #fd79a8;
+ border-left-color: #fd79a8 !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+6) > .tree-item-self {
+ border-left: 2px solid #00b894 !important; /* Verde esmeralda */
+}
+.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+6) .tree-item-children {
+ --nav-indentation-guide-color: #00b894;
+ border-left-color: #00b894 !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+7) > .tree-item-self {
+ border-left: 2px solid #fdcb6e !important; /* Amarillo mantequilla */
+}
+.nav-files-container .nav-folder-children .nav-folder:nth-child(7n+7) .tree-item-children {
+ --nav-indentation-guide-color: #fdcb6e;
+ border-left-color: #fdcb6e !important;
+}
+
+/* Colorful folder borders - Nivel 3 (Sub-subcarpetas) */
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+1) > .tree-item-self {
+ border-left: 2px solid #e17055 !important; /* Naranja terracota */
+}
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+1) .tree-item-children {
+ --nav-indentation-guide-color: #e17055;
+ border-left-color: #e17055 !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+2) > .tree-item-self {
+ border-left: 2px solid #6c5ce7 !important; /* Púrpura brillante */
+}
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+2) .tree-item-children {
+ --nav-indentation-guide-color: #6c5ce7;
+ border-left-color: #6c5ce7 !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+3) > .tree-item-self {
+ border-left: 2px solid #00cec9 !important; /* Turquesa oscuro */
+}
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+3) .tree-item-children {
+ --nav-indentation-guide-color: #00cec9;
+ border-left-color: #00cec9 !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+4) > .tree-item-self {
+ border-left: 2px solid #e84393 !important; /* Rosa magenta */
+}
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+4) .tree-item-children {
+ --nav-indentation-guide-color: #e84393;
+ border-left-color: #e84393 !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+5) > .tree-item-self {
+ border-left: 2px solid #2d3436 !important; /* Gris carbón */
+}
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+5) .tree-item-children {
+ --nav-indentation-guide-color: #2d3436;
+ border-left-color: #2d3436 !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+6) > .tree-item-self {
+ border-left: 2px solid #fab1a0 !important; /* Melocotón */
+}
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder:nth-child(6n+6) .tree-item-children {
+ --nav-indentation-guide-color: #fab1a0;
+ border-left-color: #fab1a0 !important;
+}
+
+/* Colorful folder borders - Nivel 4 (Cuarto nivel) */
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+1) > .tree-item-self {
+ border-left: 1px solid #636e72 !important; /* Gris azulado */
+}
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+1) .tree-item-children {
+ --nav-indentation-guide-color: #636e72;
+ border-left-color: #636e72 !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+2) > .tree-item-self {
+ border-left: 1px solid #81ecec !important; /* Cian claro */
+}
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+2) .tree-item-children {
+ --nav-indentation-guide-color: #81ecec;
+ border-left-color: #81ecec !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+3) > .tree-item-self {
+ border-left: 1px solid #ffeaa7 !important; /* Amarillo pálido */
+}
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+3) .tree-item-children {
+ --nav-indentation-guide-color: #ffeaa7;
+ border-left-color: #ffeaa7 !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+4) > .tree-item-self {
+ border-left: 1px solid #dda0dd !important; /* Ciruela */
+}
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+4) .tree-item-children {
+ --nav-indentation-guide-color: #dda0dd;
+ border-left-color: #dda0dd !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+5) > .tree-item-self {
+ border-left: 1px solid #55efc4 !important; /* Verde agua */
+}
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(5n+5) .tree-item-children {
+ --nav-indentation-guide-color: #55efc4;
+ border-left-color: #55efc4 !important;
+}
+
+/* Colorful folder borders - Nivel 5+ (Niveles profundos - patrón rotativo) */
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(3n+1) > .tree-item-self {
+ border-left: 1px solid #b2bec3 !important; /* Gris claro */
+}
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(3n+1) .tree-item-children {
+ --nav-indentation-guide-color: #b2bec3;
+ border-left-color: #b2bec3 !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(3n+2) > .tree-item-self {
+ border-left: 1px solid #fd79a8 !important; /* Rosa suave */
+}
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(3n+2) .tree-item-children {
+ --nav-indentation-guide-color: #fd79a8;
+ border-left-color: #fd79a8 !important;
+}
+
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(3n+3) > .tree-item-self {
+ border-left: 1px solid #74b9ff !important; /* Azul suave */
+}
+.nav-files-container .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder-children .nav-folder:nth-child(3n+3) .tree-item-children {
+ --nav-indentation-guide-color: #74b9ff;
+ border-left-color: #74b9ff !important;
+}
+
+/* Make items focused via arrow keys highlighted */
+.nav-files-container .tree-item-self.has-focus {
+ background-color: rgba(var(--color-yellow-rgb), 0.4) !important;
+}
+
+/* Folder title text color for better contrast on colored backgrounds */
+.nav-files-container > div > .nav-folder > .nav-folder-title {
+ color: var(--text-normal) !important;
+ font-weight: 500;
+}
+
+ /* File navigation improvements */
+ & .nav-file-title {
+ color: var(--text-muted);
+ transition: color 0.2s ease, background-color 0.2s ease;
+ }
+
+ & .nav-file-title:hover {
+ color: var(--text-normal);
+ }
+
+ & .nav-file-title.is-active {
+ color: var(--text-accent) !important;
+ background-color: rgba(var(--color-yellow-rgb), 0.5) !important;
+ }
+}
+
+/* Estilos específicos para modo oscuro (Versión Luminosa con Fondo Negro) */
+
+/* Estilos específicos para modo oscuro (Versión Luminosa con Fondo Negro) */
+
+/* Pestañas del workspace */
+.theme-dark .workspace-tab-header {
+ background-color: var(--card-color) !important;
+ border: 1px solid #2a2a2a;
+ border-radius: var(--radius-xl);
+ padding: 4px 16px;
+}
+
+/* Workspace tab containers */
+.theme-dark .workspace .mod-root .workspace-tabs.mod-stacked .workspace-tab-container .workspace-tab-header {
+ border-radius: var(--radius-xl) 0 0 var(--radius-xl);
+ background: var(--card-color) !important;
+ color: var(--text-normal);
+ border: 1px solid #2a2a2a;
+ box-shadow: -24px 0px 56px rgba(42, 42, 42, 0.3);
+}
+
+.theme-dark .workspace-split.mod-root .view-content {
+ background-color: var(--background-primary);
+ border-radius: var(--radius-xl);
+}
+
+.theme-dark .view-header {
+ border-radius: var(--radius-xl);
+ margin: 0 0 8px 0;
+ background-color: var(--card-color);
+}
+
+/* Workspace leaf content */
+.theme-dark .workspace-split .workspace-leaf-content:not([data-type="file-explorer"]) {
+ background-color: var(--card-color);
+ border-radius: var(--radius-xl);
+ border: 1px solid #2a2a2a;
+}
+
+.theme-dark .mod-root .workspace-tabs .workspace-leaf {
+ background-color: var(--card-color);
+ border-radius: var(--radius-xl);
+ padding: 8px;
+ border: 1px solid #2a2a2a;
+}
+
+.theme-dark .mod-left-split .workspace-tab-header,
+.theme-dark .mod-right-split .workspace-tab-header {
+ border: 1px solid #2a2a2a;
+ border-radius: var(--radius-m);
+ background-color: var(--card-color);
+}
+
+/* Menús contextuales */
+.theme-dark .menu,
+.theme-dark .suggestion-container,
+.theme-dark .modal {
+ background-color: var(--card-color) !important;
+ border: 2px solid #2a2a2a;
+ border-radius: var(--radius-xl);
+}
+
+/* Sugerencias */
+.theme-dark .suggestion-container {
+ background-color: var(--card-color) !important;
+ border: 2px solid #2a2a2a;
+ border-radius: var(--radius-xl);
+}
+
+/* Modales */
+.theme-dark .modal-bg {
+ background-color: rgba(42, 42, 42, 0.9);
+}
+
+.theme-dark .modal {
+ border: 2px solid #2a2a2a;
+ border-radius: var(--radius-xl);
+}
+
+.theme-dark .modal-sidebar {
+ background-color: var(--card-color);
+ border-radius: var(--radius-xl);
+}
+
+/* Dropdowns y selects */
+.theme-dark select,
+.theme-dark .dropdown {
+ background-color: var(--select-color);
+ border: 1px solid #2a2a2a;
+ border-radius: var(--radius-xl);
+ color: var(--text-normal);
+ padding: 8px 10.1px;
+}
+
+.theme-dark select:hover,
+.theme-dark .dropdown:hover,
+.theme-dark select:focus,
+.theme-dark .dropdown:focus {
+ background-color: var(--select-color);
+ border-color: var(--text-accent);
+ box-shadow: none;
+}
+
+/* Checkbox containers */
+.theme-dark .checkbox-container {
+ background-color: var(--select-color);
+ border-radius: var(--radius-m);
+}
+
+/* Metadata containers */
+.theme-dark .metadata-container .metadata-add-button {
+ border-radius: var(--radius-xl);
+ background: var(--card-color);
+ padding: 0 16px 0 8px;
+ margin-top: 1em;
+ border: 1px solid #2a2a2a;
+}
+
+/* Vertical tab headers */
+.theme-dark .vertical-tab-header {
+ background-color: var(--card-color);
+ border-radius: var(--radius-m);
+}
+
+/* Community items */
+.theme-dark .community-item {
+ border-radius: var(--radius-xl);
+ border: 1px solid #2a2a2a;
+}
+
+/* Input de búsqueda */
+.theme-dark input[type="search"] {
+ background-color: var(--input-color);
+ border-radius: var(--radius-xl);
+ border: 1px solid #2a2a2a;
+}
+
+/* Mantener bordes grises muy oscuros */
+.theme-dark .workspace-leaf,
+.theme-dark .workspace-split,
+.theme-dark .nav-folder-title,
+.theme-dark .nav-file-title,
+.theme-dark .workspace-tab-header {
+ border-color: #2a2a2a !important;
+}
+
+/* Tablas con bordes redondeados */
+.theme-dark table {
+ border-radius: var(--radius-l);
+ border: 1px solid #2a2a2a;
+ background-color: var(--card-color);
+ box-shadow: 0 2px 8px rgba(42, 42, 42, 0.2);
+}
+
+.theme-dark th {
+ background-color: rgba(var(--background-secondary-rgb), 0.9);
+ border: 1px solid #2a2a2a;
+}
+
+.theme-dark td {
+ border: 1px solid #2a2a2a;
+}
+
+/* Callouts con bordes redondeados y contraste */
+.theme-dark .callout {
+ border-radius: var(--radius-l);
+ border: 1px solid #2a2a2a;
+ background-color: rgba(var(--background-secondary-rgb), 0.7);
+}
+
+/* Botones con bordes redondeados */
+.theme-dark button {
+ background-color: var(--card-color);
+ border: 1px solid #2a2a2a;
+ border-radius: var(--radius-xl);
+ color: var(--text-normal);
+}
+
+.theme-dark button:hover {
+ background-color: rgba(var(--background-secondary-rgb), 0.9);
+ border-color: var(--text-accent);
+}
+
+/* Inputs y controles de entrada */
+.theme-dark input, .theme-dark textarea, .theme-dark select {
+ background-color: var(--input-color);
+ border: 1px solid #2a2a2a;
+ border-radius: var(--radius-xl);
+ color: var(--text-normal);
+}
+
+.theme-dark input:focus, .theme-dark textarea:focus, .theme-dark select:focus {
+ border-color: var(--text-accent);
+ box-shadow: 0 0 0 2px rgba(204, 153, 255, 0.3);
+}
+
+/* Elementos de búsqueda */
+.theme-dark .search-input {
+ background-color: var(--input-color);
+ border: 1px solid #2a2a2a;
+ border-radius: var(--radius-xl);
+}
+
+.theme-dark .search-input:focus {
+ border-color: var(--text-accent);
+ box-shadow: 0 0 0 2px rgba(204, 153, 255, 0.2);
+}
+
+/* Tooltips */
+.theme-dark .tooltip {
+ background-color: var(--card-color);
+ border: 1px solid #2a2a2a;
+ border-radius: var(--radius-m);
+ color: var(--text-normal);
+}
+
+/* Blockquotes */
+.theme-dark blockquote {
+ background-color: rgba(var(--background-secondary-rgb), 0.8);
+ border-left: 3px solid var(--text-accent);
+ border-radius: 0 var(--radius-m) var(--radius-m) 0;
+}
+
+
+/* Títulos y encabezados */
+h1, h2, h3, h4, h5, h6 {
+ font-family: 'EB Garamond', Georgia, serif !important;
+ font-weight: 600;
+ color: var(--text-normal);
+}
+
+h1 { font-size: 2.2em; }
+h2 { font-size: 1.8em; }
+h3 { font-size: 1.5em; }
+h4 { font-size: 1.3em; }
+h5 { font-size: 1.1em; }
+h6 { font-size: 1em; }
+
+/* Editor principal */
+.markdown-source-view,
+.markdown-preview-view {
+ font-family: 'EB Garamond', Georgia, serif !important;
+ color: var(--text-normal);
+ background-color: var(--background-primary);
+}
+
+/* Sidebar */
+.nav-folder-title,
+.nav-file-title {
+ font-family: 'EB Garamond', Georgia, serif !important;
+ color: var(--text-normal);
+ border-radius: 4px;
+ padding: 4px 8px;
+ border: none;
+ box-shadow: 0 1px 0 0 rgba(128, 128, 128, 0.3);
+}
+
+.nav-folder-title:hover,
+.nav-file-title:hover {
+ background-color: var(--interactive-hover);
+ box-shadow: 0 1px 0 0 rgba(128, 128, 128, 0.5);
+}
+
+.nav-file-title.is-active {
+ background-color: var(--interactive-accent);
+ color: var(--text-on-accent);
+ box-shadow: 0 1px 0 0 var(--text-accent);
+}
+
+/* Pestañas */
+.workspace-tab-header {
+ background-color: var(--background-secondary);
+ border-bottom: 1px solid var(--border-color);
+}
+
+.workspace-tab-header-inner {
+ font-family: 'EB Garamond', Georgia, serif !important;
+ color: var(--text-muted);
+ border: 1px solid transparent;
+ border-radius: 4px 4px 0 0;
+ padding: 8px 10.1px;
+}
+
+.workspace-tab-header-inner:hover {
+ background-color: var(--interactive-hover);
+ border-color: var(--border-color-hover);
+ color: var(--text-normal);
+}
+
+.workspace-tab-header-inner.is-active {
+ background-color: var(--background-primary);
+ border-color: var(--border-color);
+ border-bottom-color: var(--background-primary);
+ color: var(--text-normal);
+}
+
+/* Barra de estado */
+.status-bar {
+ background-color: var(--background-secondary);
+ border-top: 1px solid var(--border-color);
+ font-family: 'EB Garamond', Georgia, serif !important;
+ color: var(--text-muted);
+}
+
+/* Botones */
+button {
+ font-family: 'EB Garamond', Georgia, serif !important;
+ background-color: var(--interactive-normal);
+ color: var(--text-normal);
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+ padding: 6px 10.1px;
+ transition: all 0.5s ease;
+}
+
+button:hover {
+ background-color: var(--interactive-hover);
+ border-color: var(--border-color-hover);
+}
+
+.mod-cta {
+ background-color: var(--interactive-accent) !important;
+ color: var(--text-on-accent) !important;
+ border-color: var(--interactive-accent) !important;
+}
+
+.mod-cta:hover {
+ background-color: var(--interactive-accent-hover) !important;
+ border-color: var(--interactive-accent-hover) !important;
+}
+
+/* Campos de entrada */
+input[type="text"],
+input[type="search"],
+input[type="email"],
+input[type="password"],
+input[type="number"],
+textarea {
+ font-family: 'EB Garamond', Georgia, serif !important;
+ background-color: var(--input-color);
+ color: var(--text-normal);
+ border: 0.1px solid var(--card-color);
+ border-radius: var(--radius-xl);
+ padding: 8px 10.1px;
+}
+
+input:focus,
+textarea:focus {
+ border-color: var(--text-accent);
+ background-color: var(--input-color);
+ outline: none;
+ box-shadow: none;
+}
+
+/* Scrollbars */
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--background-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--border-color);
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--border-color-hover);
+}
+
+/* Divisores */
+.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle,
+.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle {
+ background-color: var(--divider-color);
+}
+
+.workspace-split.mod-vertical > * > .workspace-leaf-resize-handle:hover,
+.workspace-split.mod-horizontal > * > .workspace-leaf-resize-handle:hover {
+ background-color: var(--divider-color-hover);
+}
+
+/* Menús contextuales */
.menu {
- padding: var(--size-2-1);
+ background-color: var(--background-primary);
+ border: 0.1px solid var(--card-color);
+ border-radius: var(--radius-xl);
+ box-shadow: 0 4px 10.1px var(--background-modifier-box-shadow);
}
.menu-item {
- padding: var(--size-4-1) var(--size-4-2);
+ font-family: 'EB Garamond', Georgia, serif !important;
+ color: var(--text-normal);
+ padding: 6px 10.1px;
+}
+
+.menu-item:hover {
+ background-color: var(--interactive-hover);
}
.menu-separator {
- margin: var(--size-2-1) calc(var(--size-2-1) * -1);
+ border-top: 1px solid var(--divider-color);
}
+
+/* Código */
+code {
+ font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
+ background-color: rgba(40, 44, 52, 0.8);
+ color: #ffffff !important;
+ text-shadow: 0 0 2px rgba(255, 255, 255, 0.8);
+ border: 1px solid rgba(100, 120, 140, 0.3);
+ border-radius: 8px;
+ padding: 4px 8px;
+}
+
+/* Bloques de código con variaciones tenues */
+pre {
+ background-color: rgba(30, 35, 42, 0.9);
+ border: 1px solid rgba(120, 140, 160, 0.4);
+ border-radius: 12px;
+ padding: 20px;
+ position: relative;
+ overflow-x: auto;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+pre code {
+ background: none;
+ border: none;
+ padding: 0;
+ color: #ffffff !important;
+ text-shadow: 0 0 3px rgba(255, 255, 255, 0.9);
+}
+
+/* Bloques de código específicos por lenguaje */
+.theme-dark {
+ /* JavaScript */
+ .language-javascript pre,
+ .language-js pre {
+ background-color: rgba(255, 221, 34, 0.12);
+ border-color: rgba(255, 255, 100, 0.6);
+ border-radius: 12px;
+ }
+
+ /* Python */
+ .language-python pre,
+ .language-py pre {
+ background-color: rgba(119, 238, 255, 0.12);
+ border-color: rgba(150, 255, 255, 0.6);
+ border-radius: 12px;
+ }
+
+ /* CSS */
+ .language-css pre {
+ background-color: rgba(255, 136, 187, 0.12);
+ border-color: rgba(255, 180, 220, 0.6);
+ border-radius: 12px;
+ }
+
+ /* HTML */
+ .language-html pre {
+ background-color: rgba(255, 204, 119, 0.12);
+ border-color: rgba(255, 230, 150, 0.6);
+ border-radius: 12px;
+ }
+
+ /* JSON */
+ .language-json pre {
+ background-color: rgba(153, 255, 170, 0.12);
+ border-color: rgba(180, 255, 200, 0.6);
+ border-radius: 12px;
+ }
+
+ /* Markdown */
+ .language-markdown pre,
+ .language-md pre {
+ background-color: rgba(204, 153, 255, 0.12);
+ border-color: rgba(230, 180, 255, 0.6);
+ border-radius: 12px;
+ }
+
+ /* Bash/Shell */
+ .language-bash pre,
+ .language-shell pre,
+ .language-sh pre {
+ background-color: rgba(85, 85, 85, 0.5);
+ border-color: rgba(200, 200, 200, 0.6);
+ border-radius: 12px;
+ }
+}
+
+/* Callouts */
+.callout {
+ border-radius: 8px;
+ padding: 16px;
+ margin: 16px 0;
+ border-left: 4px solid;
+}
+
+.callout[data-callout="info"] {
+ background-color: var(--callout-info);
+ border-left-color: var(--callout-info-border);
+ color: var(--callout-info-text);
+}
+
+.callout[data-callout="warning"] {
+ background-color: var(--callout-warning);
+ border-left-color: var(--callout-warning-border);
+ color: var(--callout-warning-text);
+}
+
+.callout[data-callout="error"], .callout[data-callout="danger"] {
+ background-color: var(--callout-error);
+ border-left-color: var(--callout-error-border);
+ color: var(--callout-error-text);
+}
+
+.callout[data-callout="success"] {
+ background-color: var(--callout-success);
+ border-left-color: var(--callout-success-border);
+ color: var(--callout-success-text);
+}
+
+.callout[data-callout="tip"], .callout[data-callout="hint"] {
+ background-color: var(--callout-tip);
+ border-left-color: var(--callout-tip-border);
+ color: var(--callout-tip-text);
+}
+
+.callout[data-callout="note"], .callout[data-callout="abstract"], .callout[data-callout="summary"] {
+ background-color: var(--callout-note);
+ border-left-color: var(--callout-note-border);
+ color: var(--callout-note-text);
+}
+
+.callout-title {
+ font-weight: bold;
+ margin-bottom: 8px;
+ display: flex;
+ align-items: center;
+}
+
+.callout-icon {
+ margin-right: 8px;
+}
+
+/* Tags */
+.tag {
+ background-color: var(--tag-background);
+ color: var(--tag-text);
+ border: 1px solid var(--tag-border);
+ border-radius: 12px;
+ padding: 2px 8px;
+ font-size: 0.85em;
+ display: inline-block;
+ margin: 2px;
+}
+
+.tag:hover {
+ opacity: 0.8;
+}
+
+/* Highlights */
+mark, .cm-highlight {
+ border-radius: 3px;
+ padding: 1px 2px;
+}
+
+.markdown-rendered mark {
+ background-color: var(--highlight-yellow);
+ color: var(--text-normal);
+}
+
+.cm-highlight-yellow {
+ background-color: var(--highlight-yellow);
+}
+
+.cm-highlight-green {
+ background-color: var(--highlight-green);
+}
+
+.cm-highlight-blue {
+ background-color: var(--highlight-blue);
+}
+
+.cm-highlight-pink {
+ background-color: var(--highlight-pink);
+}
+
+.cm-highlight-purple {
+ background-color: var(--highlight-purple);
+}
+
+/* Enlaces */
+a {
+ color: var(--text-accent);
+ text-decoration: none;
+}
+
+a:hover {
+ color: var(--text-accent-hover);
+ text-decoration: underline;
+}
+
+/* Elementos de navegación */
+.nav-header {
+ background-color: var(--background-secondary);
+ border-bottom: 1px solid var(--border-color);
+ padding: 8px 16px;
+ font-weight: bold;
+}
+
+.nav-folder-title {
+ color: var(--text-normal);
+ padding: 4px 8px;
+ border-radius: 4px;
+ transition: background-color 0.2s ease;
+}
+
+.nav-folder-title:hover {
+ background-color: var(--interactive-hover);
+}
+
+.nav-file-title {
+ color: var(--text-muted);
+ padding: 2px 8px;
+ border-radius: 4px;
+ transition: color 0.2s ease, background-color 0.2s ease;
+}
+
+.nav-file-title:hover {
+ background-color: var(--interactive-hover);
+ color: var(--text-normal);
+}
+
+.nav-file-title.is-active {
+ background-color: var(--interactive-accent);
+ color: var(--text-on-accent);
+}
+
+/* Breadcrumbs */
+.breadcrumb {
+ display: flex;
+ align-items: center;
+ padding: 8px 16px;
+ background-color: var(--background-secondary);
+ border-bottom: 1px solid var(--border-color);
+ font-size: 0.9em;
+}
+
+.breadcrumb-item {
+ color: var(--text-muted);
+ text-decoration: none;
+ padding: 4px 8px;
+ border-radius: 4px;
+ transition: background-color 0.2s ease, color 0.2s ease;
+}
+
+.breadcrumb-item:hover {
+ background-color: var(--interactive-hover);
+ color: var(--text-normal);
+}
+
+.breadcrumb-separator {
+ margin: 0 4px;
+ color: var(--text-faint);
+}
+
+/* Botones */
+.mod-cta, button {
+ background-color: var(--interactive-accent);
+ color: var(--text-on-accent);
+ border: none;
+ border-radius: 6px;
+ padding: 8px 16px;
+ font-family: inherit;
+ font-size: 0.9em;
+ cursor: pointer;
+ transition: background-color 0.2s ease, transform 0.1s ease;
+}
+
+.mod-cta:hover, button:hover {
+ background-color: var(--interactive-accent-hover);
+ transform: translateY(-1px);
+}
+
+.mod-cta:active, button:active {
+ transform: translateY(0);
+}
+
+/* Botones secundarios */
+.mod-muted {
+ background-color: var(--background-modifier-form-field);
+ color: var(--text-normal);
+ border: 1px solid var(--border-color);
+}
+
+.mod-muted:hover {
+ background-color: var(--interactive-hover);
+ border-color: var(--border-color-hover);
+}
+
+/* Controles de entrada */
+input, textarea, select {
+ background-color: var(--background-modifier-form-field);
+ color: var(--text-normal);
+ border: 1px solid var(--border-color);
+ border-radius: 4px;
+ padding: 8px 12px;
+ font-family: inherit;
+ transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+input:focus, textarea:focus, select:focus {
+ outline: none;
+ border-color: var(--interactive-accent);
+ box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.5);
+}
+
+/* Checkboxes y radio buttons */
+input[type="checkbox"], input[type="radio"] {
+ accent-color: var(--interactive-accent);
+}
+
+/* Elementos de búsqueda */
+.search-input-container {
+ position: relative;
+}
+
+.search-input {
+ padding-left: 32px;
+ background-color: var(--background-modifier-form-field);
+ border: 1px solid var(--border-color);
+ border-radius: 20px;
+}
+
+.search-input:focus {
+ border-color: var(--interactive-accent);
+ box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.1);
+}
+
+.search-icon {
+ position: absolute;
+ left: 10px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: var(--text-faint);
+}
+
+/* Estados de elementos */
+.is-selected {
+ background-color: var(--interactive-accent) !important;
+ color: var(--text-on-accent) !important;
+}
+
+.is-focused {
+ outline: 2px solid var(--interactive-accent);
+ outline-offset: 2px;
+}
+
+.is-disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* Tooltips */
+.tooltip {
+ background-color: var(--background-primary-alt);
+ color: var(--text-normal);
+ border: 1px solid var(--border-color);
+ border-radius: 6px;
+ padding: 6px 10px;
+ font-size: 0.85em;
+ box-shadow: var(--background-modifier-box-shadow);
+}
+
+/* Scrollbars */
+::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: var(--background-secondary);
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--border-color);
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: var(--border-color-hover);
+}
+
+/* Blockquotes */
+blockquote {
+ border-left: 4px solid var(--text-accent);
+ background-color: var(--background-secondary);
+ margin: 16px 0;
+ padding: 10.1px 16px;
+ border-radius: 0 4px 4px 0;
+}
+
+/* Listas */
+ul, ol {
+ padding-left: 24px;
+}
+
+li {
+ margin: 4px 0;
+}
+
+/* Tablas */
+table {
+ font-family: 'EB Garamond', Georgia, serif !important;
+ border-collapse: separate;
+ border-spacing: 0;
+ width: 100%;
+ margin: 1em 0;
+ background-color: var(--background-primary);
+ border-radius: var(--radius-l);
+ overflow: hidden;
+ border: 0.1px solid var(--table-border-color);
+}
+
+th, td {
+ border: 1px solid var(--table-border-color);
+ padding: 8px 10.1px;
+ text-align: left;
+}
+
+th {
+ background-color: var(--card-color);
+ font-weight: 600;
+ color: var(--text-normal);
+}
+
+/* Callouts con bordes redondeados */
+.callout {
+ border-radius: var(--radius-l);
+ border: 0.1px solid var(--table-border-color);
+ background-color: var(--card-color);
+}
+
+/* Botones */
+button {
+ background-color: var(--card-color);
+ border: 0.1px solid var(--table-border-color);
+ border-radius: var(--radius-xl);
+ color: var(--text-normal);
+ padding: 8px 16px;
+ font-family: 'EB Garamond', Georgia, serif !important;
+}
+
+button:hover {
+ background-color: var(--select-color);
+ border-color: var(--text-accent);
+}
+
+button:active {
+ background-color: var(--input-color);
+}
+
+tr:nth-child(even) {
+ background-color: var(--background-primary-alt);
+}
+
+/* Animaciones suaves - aplicadas solo a elementos específicos */
+/* Removido el selector universal (*) que causaba problemas de movimiento en el explorador de archivos */
+
+
+/* === 1) Fondo y texto sólidos para code/blocks === */
+.theme-dark .markdown-rendered pre,
+.theme-dark .markdown-rendered pre code {
+ background: #0f1117 !important;
+ color: #e6e9ef !important;
+ border: 1px solid #2a2f3a !important;
+ text-shadow: none !important; /* quita “neblina” */
+}
+
+/* inline code (no tan pesado) */
+.theme-dark .markdown-rendered code:not([class*="language-"]) {
+ background: #11151a !important;
+ color: #e6e9ef !important;
+ border: 1px solid #2a2f3a !important;
+ text-shadow: none !important;
+}
+
+/* === Estilos para Modo Claro === */
+.theme-light .markdown-rendered pre,
+.theme-light .markdown-rendered pre code {
+ background: #f8f9fa !important;
+ color: #212529 !important;
+ border: 1px solid #dee2e6 !important;
+ text-shadow: none !important;
+}
+
+.theme-light .markdown-rendered code:not([class*="language-"]) {
+ background: #f1f3f4 !important;
+ color: #212529 !important;
+ border: 1px solid #dee2e6 !important;
+ text-shadow: none !important;
+}
+
+/* === 2) Evitar opacidades en tokens (CM6 y Prism) === */
+.cm-editor .cm-line span { opacity: 1 !important; }
+.markdown-rendered code[class*="language-"] * { opacity: 1 !important; }
+
+/* === 3) Colores de tokens (CM6 – editor) - Modo Oscuro === */
+.theme-dark .cm-keyword { color: #c792ea !important; }
+.theme-dark .cm-string { color: #ecc48d !important; }
+.theme-dark .cm-number { color: #f78c6c !important; }
+.theme-dark .cm-atom,
+.theme-dark .cm-bool { color: #82aaff !important; }
+.theme-dark .cm-property { color: #addb67 !important; }
+.theme-dark .cm-comment { color: #5c6773 !important; }
+
+/* === 3) Colores de tokens (CM6 – editor) - Modo Claro === */
+.theme-light .cm-keyword { color: #6a1b9a !important; }
+.theme-light .cm-string { color: #bf6900 !important; }
+.theme-light .cm-number { color: #d84315 !important; }
+.theme-light .cm-atom,
+.theme-light .cm-bool { color: #1565c0 !important; }
+.theme-light .cm-property { color: #2e7d32 !important; }
+.theme-light .cm-comment { color: #616161 !important; }
+
+/* === 4) Colores de tokens (Prism – preview renderizado) - Modo Oscuro === */
+.theme-dark .markdown-rendered code[class*="language-"] .token.keyword { color: #c792ea !important; }
+.theme-dark .markdown-rendered code[class*="language-"] .token.string { color: #ecc48d !important; }
+.theme-dark .markdown-rendered code[class*="language-"] .token.number { color: #f78c6c !important; }
+.theme-dark .markdown-rendered code[class*="language-"] .token.boolean { color: #82aaff !important; }
+.theme-dark .markdown-rendered code[class*="language-"] .token.property { color: #addb67 !important; }
+.theme-dark .markdown-rendered code[class*="language-"] .token.comment { color: #5c6773 !important; }
+
+/* === 4) Colores de tokens (Prism – preview renderizado) - Modo Claro === */
+.theme-light .markdown-rendered code[class*="language-"] .token.keyword { color: #6a1b9a !important; }
+.theme-light .markdown-rendered code[class*="language-"] .token.string { color: #bf6900 !important; }
+.theme-light .markdown-rendered code[class*="language-"] .token.number { color: #d84315 !important; }
+.theme-light .markdown-rendered code[class*="language-"] .token.boolean { color: #1565c0 !important; }
+.theme-light .markdown-rendered code[class*="language-"] .token.property { color: #2e7d32 !important; }
+.theme-light .markdown-rendered code[class*="language-"] .token.comment { color: #616161 !important; }
+
+code { background-color: #0f1117 !important; border-color: #2a2f3a !important; text-shadow: none !important; }
+pre { background-color: #0f1117 !important; border-color: #2a2f3a !important; }
+
+/* === 6) Reglas por lenguaje (aplican al code dentro de pre) === */
+.markdown-rendered pre code.language-javascript { --code-bg: #1a1400; --code-bd: #665200; }
+.markdown-rendered pre code.language-python { --code-bg: #001a1a; --code-bd: #0f4d4d; }
+.markdown-rendered pre code.language-css { --code-bg: #1a0010; --code-bd: #661141; }
+.markdown-rendered pre code.language-html { --code-bg: #1a0f00; --code-bd: #664200; }
+
+.markdown-rendered pre {
+ background: var(--code-bg, #0f1117) !important;
+ border-color: var(--code-bd, #2a2f3a) !important;
+}
+
+