main {
	max-width: none;
	padding: 1rem;
}

@media screen and (min-width: 1024px) {
	main {
		padding: 1.25rem 1.5rem;
	}
}

#content {
	display: none;
}

#loader {
	display: flex;
	justify-content: center;
}

/* ESPACIO DE TRABAJO: árbol lateral + editor */
.workspace {
	align-items: start;
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(0, 1fr);
}

.editor-shell {
	min-width: 0;
}

/* ÁRBOL DE CARPETAS Y DOCUMENTOS */
.doc-tree {
	background: var(--surface-alt);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.doc-tree-head {
	align-items: center;
	border-bottom: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	min-height: 3.5rem;
	padding: 0 .5rem 0 1rem;
}

.doc-tree-title {
	color: var(--ink);
	font-size: .875rem;
	font-weight: 600;
}

.doc-tree-new {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	font-family: inherit;
	color: var(--muted);
	display: flex;
	flex-shrink: 0;
	font-size: 1.125rem;
	height: 2.25rem;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	width: 2.25rem;
}

.doc-tree-new:hover {
	background: var(--accent-soft);
	color: var(--accent);
}

.doc-tree-filter {
	padding: .75rem .75rem .25rem;
}

.doc-tree-filter input {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	font-family: inherit;
	font-size: .8125rem;
	height: 2.25rem;
	outline: none;
	padding: 0 .625rem;
	width: 100%;
}

.doc-tree-filter input:focus {
	border-color: var(--accent);
	box-shadow: var(--focus);
}

.doc-tree-list,
.doc-tree-children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.doc-tree-list {
	flex: 1;
	overflow-y: auto;
	padding: .5rem;
}

.doc-tree-list::-webkit-scrollbar {
	width: 6px;
}

.doc-tree-list::-webkit-scrollbar-thumb {
	background: var(--line-strong);
	border-radius: 3px;
}

.doc-tree-folder-row {
	align-items: center;
	display: flex;
}

.doc-tree-folder-btn,
.doc-tree-doc {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--radius);
	color: var(--ink-2);
	cursor: pointer;
	display: flex;
	flex: 1;
	font-family: inherit;
	font-size: .875rem;
	gap: .5rem;
	min-height: 2.25rem;
	min-width: 0;
	padding: 0 .5rem;
	text-align: left;
	text-decoration: none;
}

.doc-tree-folder-btn {
	color: var(--ink);
	font-weight: 600;
}

.doc-tree-folder-btn span:last-child,
.doc-tree-doc span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.doc-tree-folder-btn svg,
.doc-tree-doc svg {
	color: var(--muted);
	flex-shrink: 0;
}

.doc-tree-folder-btn > svg {
	color: var(--accent);
}

.doc-tree-chevron {
	display: flex;
	width: 12px;
}

.doc-tree-folder-btn:hover,
.doc-tree-doc:hover {
	background: var(--code-bg);
	color: var(--ink);
}

/* El "+" de cada carpeta solo aparece al pasar o con foco (siempre en táctil) */
.doc-tree-folder-row .doc-tree-new {
	opacity: 0;
}

.doc-tree-folder-row:hover .doc-tree-new,
.doc-tree-folder-row .doc-tree-new:focus-visible {
	opacity: 1;
}

@media (hover: none) {
	.doc-tree-folder-row .doc-tree-new {
		opacity: 1;
	}
}

.doc-tree-children .doc-tree-doc {
	padding-left: 2.25rem;
}

.doc-tree-doc.is-current {
	background: var(--accent-soft);
	color: var(--accent);
	font-weight: 600;
}

.doc-tree-doc.is-current svg {
	color: var(--accent);
}

.doc-tree-status {
	color: var(--muted);
	font-size: .8125rem;
	padding: .5rem .5rem .5rem 2.25rem;
}

.doc-tree-list > .doc-tree-status {
	padding-left: .5rem;
}

.doc-tree-all {
	border-top: 1px solid var(--line);
	color: var(--ink-2);
	font-size: .8125rem;
	padding: .875rem 1rem;
	text-decoration: none;
}

.doc-tree-all:hover {
	background: var(--code-bg);
	color: var(--ink);
}

/* Resultado de búsqueda por contenido: título + fragmento */
.doc-tree-doc-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.doc-tree-doc.has-snippet {
	align-items: flex-start;
	padding-bottom: .375rem;
	padding-top: .375rem;
}

.doc-tree-doc.has-snippet svg {
	margin-top: .125rem;
}

.doc-tree-doc .doc-tree-snippet {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	color: var(--muted);
	display: -webkit-box;
	font-size: .75rem;
	font-weight: 400;
	line-height: 1.4;
	white-space: normal;
}

.doc-tree-snippet mark {
	background: var(--accent-soft);
	border-radius: 2px;
	color: var(--ink);
	font-weight: 600;
	padding: 0 1px;
}

/* Filas con botón de opciones "⋮" */
li.doc-tree-row {
	align-items: center;
	display: flex;
}

.doc-tree-more {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--radius);
	color: var(--muted);
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	height: 2rem;
	justify-content: center;
	opacity: 0;
	width: 2rem;
}

.doc-tree-more:hover,
.doc-tree-more[aria-expanded="true"] {
	background: var(--code-bg);
	color: var(--ink);
}

.doc-tree-row:hover .doc-tree-more,
.doc-tree-row:focus-within .doc-tree-more,
.doc-tree-more[aria-expanded="true"] {
	opacity: 1;
}

@media (hover: none) {
	.doc-tree-more {
		opacity: 1;
	}
}

.doc-tree-folder-row:focus-within .doc-tree-new {
	opacity: 1;
}

/* Menú flotante de opciones */
.tree-menu {
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
	min-width: 13rem;
	padding: .375rem;
	position: fixed;
	z-index: 1300;
}

.tree-menu[hidden] {
	display: none;
}

.tree-menu-item {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--radius);
	color: var(--ink);
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: .875rem;
	gap: .625rem;
	min-height: 2.5rem;
	padding: 0 .625rem;
	text-align: left;
	width: 100%;
}

.tree-menu-item svg {
	color: var(--muted);
	flex-shrink: 0;
}

.tree-menu-item:hover,
.tree-menu-item:focus-visible {
	background: var(--accent-soft);
	color: var(--accent);
}

.tree-menu-item:hover svg,
.tree-menu-item:focus-visible svg {
	color: inherit;
}

.tree-menu-item.is-danger {
	color: var(--danger);
}

.tree-menu-item.is-danger svg {
	color: var(--danger);
}

.tree-menu-item.is-danger:hover,
.tree-menu-item.is-danger:focus-visible {
	background: var(--danger-soft);
	color: var(--danger);
}

/* Importar .md arrastrando */
.doc-tree.is-drop-target {
	box-shadow: inset 0 0 0 2px var(--accent);
}

.doc-tree-folder.is-drop-target > .doc-tree-folder-row {
	background: var(--accent-soft);
	border-radius: var(--radius);
	box-shadow: inset 0 0 0 2px var(--accent);
}

.doc-tree-foot {
	border-top: 1px solid var(--line);
	display: flex;
	flex-direction: column;
	gap: .25rem;
	padding: .5rem .5rem .75rem;
}

.doc-tree-trash {
	align-items: center;
	background: none;
	border: 0;
	border-radius: var(--radius);
	color: var(--ink-2);
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: .875rem;
	gap: .5rem;
	min-height: 2.25rem;
	padding: 0 .5rem;
	text-align: left;
}

.doc-tree-trash:hover {
	background: var(--code-bg);
	color: var(--ink);
}

.doc-tree-trash svg {
	color: var(--muted);
}

.doc-tree-hint {
	color: var(--muted);
	font-size: .75rem;
	line-height: 1.4;
	padding: 0 .5rem;
}

/* "Compartido conmigo" e indicador de elementos compartidos */
.doc-tree-section {
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: .75rem;
	font-weight: 600;
	margin-top: .5rem;
	padding: .75rem .5rem .25rem;
}

.doc-tree-shared {
	color: var(--accent);
	display: inline-flex;
	flex-shrink: 0;
	margin-left: auto;
}

/* ESTADO DE GUARDADO */
.save-status {
	color: var(--muted);
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: .75rem;
	white-space: nowrap;
}

.save-status[data-state="dirty"],
.save-status[data-state="saving"] {
	color: var(--ink-2);
}

.save-status[data-state="error"],
.save-status[data-state="conflict"] {
	color: var(--danger);
	font-weight: 500;
}

/* AVISOS DEL EDITOR */
.shared-notice {
	background: var(--accent-soft);
	border-bottom: 1px solid var(--line);
	color: var(--ink-2);
	font-size: .8125rem;
	padding: .5rem 1rem;
}

.shared-notice[hidden],
.conflict-banner[hidden] {
	display: none;
}

.conflict-banner {
	align-items: center;
	background: var(--danger-soft);
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	display: flex;
	flex-wrap: wrap;
	font-size: .875rem;
	gap: .75rem 1rem;
	justify-content: space-between;
	padding: .75rem 1rem;
}

.conflict-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.meta-toggle.is-disabled {
	cursor: not-allowed;
	opacity: .6;
}

/* PAPELERA */
.trash-modal,
.share-modal {
	max-width: 34rem;
}

.trash-desc,
.share-desc {
	color: var(--muted);
	font-size: .875rem;
	margin: .5rem 0 1rem;
}

.trash-empty,
.share-empty {
	border: 1px dashed var(--line-strong);
	border-radius: var(--radius-lg);
	color: var(--muted);
	font-size: .875rem;
	padding: 1.25rem;
	text-align: center;
}

.trash-empty[hidden],
.share-empty[hidden],
.share-inherited[hidden],
#btnEmptyTrash[hidden] {
	display: none;
}

.trash-list,
.share-list {
	display: grid;
	gap: .375rem;
	list-style: none;
	margin: 0;
	max-height: 50vh;
	overflow-y: auto;
	padding: 0;
}

.trash-item {
	align-items: center;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: flex;
	gap: .5rem;
	padding: .5rem .5rem .5rem .75rem;
}

.trash-info {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.trash-name {
	color: var(--ink);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.trash-meta {
	color: var(--muted);
	font-size: .75rem;
}

.trash-loading {
	color: var(--muted);
	padding: 1rem;
	text-align: center;
}

.trash-purge,
.share-remove {
	align-items: center;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--radius);
	color: var(--muted);
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	font-size: 1.125rem;
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

.trash-purge:hover,
.share-remove:hover {
	background: var(--danger-soft);
	color: var(--danger);
}

.btn-danger {
	color: var(--danger) !important;
}

.btn-danger:hover {
	background: var(--danger-soft);
	border-color: var(--danger);
}

/* COMPARTIR */
#shareForm {
	display: grid;
	gap: 1rem;
}

.share-add {
	display: flex;
	gap: .5rem;
}

.share-add input {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	flex: 1;
	font-family: inherit;
	font-size: .9375rem;
	min-height: 2.75rem;
	min-width: 0;
	outline: none;
	padding: 0 .75rem;
}

.share-add input:focus {
	border-color: var(--accent);
	box-shadow: var(--focus);
}

.share-add .btn-s {
	min-height: 2.75rem;
}

.share-list li {
	align-items: center;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: flex;
	gap: .5rem;
	justify-content: space-between;
	padding: .125rem .125rem .125rem .75rem;
}

.share-list li span {
	font-family: var(--font-mono);
	font-size: .875rem;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.share-inherited {
	color: var(--muted);
	font-size: .8125rem;
}

.btn-tree-toggle {
	align-items: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: .875rem;
	font-weight: 500;
	gap: .5rem;
	min-height: 2.5rem;
	padding: 0 .75rem;
}

.btn-tree-toggle svg {
	color: var(--accent);
}

.btn-tree-toggle:hover {
	background: var(--code-bg);
}

/* Escritorio: árbol fijo a la izquierda */
@media screen and (min-width: 1024px) {
	.workspace {
		grid-template-columns: 16.5rem minmax(0, 1fr);
	}

	.doc-tree {
		max-height: calc(100dvh - 3.5rem - 2.5rem);
		position: sticky;
		top: 4.75rem;
	}

	.btn-tree-toggle,
	.doc-tree-backdrop {
		display: none;
	}
}

/* Pantallas estrechas: el árbol es un panel lateral */
@media screen and (max-width: 1023px) {
	.doc-tree {
		border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
		bottom: 0;
		box-shadow: var(--shadow-pop);
		left: 0;
		max-width: 85vw;
		position: fixed;
		top: 0;
		transform: translateX(-105%);
		transition: transform .2s ease;
		width: 20rem;
		z-index: 1200;
	}

	.doc-tree.is-open {
		transform: translateX(0);
	}

	.doc-tree-backdrop {
		background: var(--overlay);
		inset: 0;
		position: fixed;
		z-index: 1100;
	}

	.doc-tree-backdrop[hidden] {
		display: none;
	}
}

@media screen and (max-width: 480px) {
	.btn-tree-toggle span {
		display: none;
	}
}

/* SIN DOCUMENTO SELECCIONADO */
.editor-shell[hidden],
.editor-empty[hidden] {
	display: none;
}

.editor-empty {
	align-items: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	color: var(--muted);
	display: flex;
	flex-direction: column;
	gap: .75rem;
	justify-content: center;
	min-height: calc(100dvh - 3.5rem - 2.5rem - 3.5rem);
	padding: 3rem 1.5rem;
	text-align: center;
}

.editor-empty h2 {
	color: var(--ink);
	font-size: 1.25rem;
	font-weight: 600;
}

.editor-empty p {
	font-size: .9375rem;
	max-width: 28rem;
}

.editor-empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: center;
	margin-top: .5rem;
}

@media screen and (min-width: 1024px) {
	.btn-empty-tree {
		display: none !important;
	}
}

/* DIÁLOGO CREAR DOCUMENTO O CARPETA */
.create-modal {
	max-width: 30rem;
}

#createForm {
	display: grid;
	gap: 1.125rem;
	margin-top: 1.25rem;
}

#createForm [hidden] {
	display: none;
}

.create-type {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	display: grid;
	gap: .25rem;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	padding: .25rem;
}

.create-type label {
	cursor: pointer;
	display: flex;
}

.create-type input {
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

.create-type span {
	align-items: center;
	border-radius: 4px;
	color: var(--ink-2);
	display: flex;
	flex: 1;
	font-size: .875rem;
	font-weight: 500;
	justify-content: center;
	min-height: 2.5rem;
}

.create-type label:hover span {
	background: var(--code-bg);
}

.create-type input:checked + span {
	background: var(--accent-soft);
	color: var(--accent);
	font-weight: 600;
}

.create-type input:focus-visible + span {
	box-shadow: var(--focus);
}

#createForm select {
	appearance: none;
	background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6576' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .75rem center;
	cursor: pointer;
	padding-right: 2.25rem;
}

.form-error {
	background: var(--danger-soft);
	border-radius: var(--radius);
	color: var(--danger);
	font-size: .875rem;
	padding: .625rem .75rem;
}

#createForm .modal-action {
	margin-top: 0;
}

#createForm .help-text {
	margin-left: 0;
}

/* ESTRUCTURA: barra superior + panel dividido + pie de metadatos */
.editor-shell {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	display: flex;
	flex-direction: column;
	min-height: calc(100dvh - 3.5rem - 2.5rem - 3.5rem);
	overflow: visible;
}

.editor-toolbar {
	align-items: center;
	border-bottom: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	padding: .625rem 1rem;
}

.doc-name-input {
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--radius);
	color: var(--ink);
	flex: 1 1 16rem;
	font-family: inherit;
	font-size: 1.125rem;
	font-weight: 600;
	min-height: 2.5rem;
	min-width: 0;
	outline: none;
	padding: 0 .5rem;
}

.doc-name-input:hover {
	border-color: var(--line);
}

.doc-name-input:focus {
	border-color: var(--accent);
	box-shadow: var(--focus);
}

.doc-name-input::placeholder {
	color: var(--placeholder);
}

.editor-tools {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.toolbar-divider {
	background: var(--line);
	height: 1.5rem;
	width: 1px;
}

.editor-layout {
	display: grid;
	flex: 1;
	grid-template-columns: 1fr;
	min-height: 0;
}

.editor-pane {
	display: flex;
	min-height: 60vh;
}

#docContent {
	background: var(--surface);
	border: 0;
	color: var(--ink-2);
	flex: 1;
	font-family: var(--font-mono);
	font-size: .875rem;
	line-height: 1.75;
	outline: none;
	padding: 1.5rem 1.75rem;
	resize: none;
	tab-size: 2;
	width: 100%;
}

#docContent:focus {
	box-shadow: inset 0 0 0 2px rgba(47, 85, 212, 0.18);
}

#docContent::placeholder {
	color: var(--placeholder);
}

#docContent.drag-over {
	background: var(--accent-soft);
	box-shadow: inset 0 0 0 2px var(--accent);
}

.live-preview {
	display: none;
}

@media screen and (min-width: 1024px) {
	.editor-layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.editor-pane {
		border-right: 1px solid var(--line);
	}

	.live-preview {
		display: block;
		max-height: calc(100dvh - 12rem);
		overflow-y: auto;
		position: sticky;
		top: 4rem;
	}

	.live-preview-content {
		padding: 1.5rem 2.5rem;
	}

	.live-preview::-webkit-scrollbar {
		width: 6px;
	}

	.live-preview::-webkit-scrollbar-thumb {
		background: var(--line-strong);
		border-radius: 3px;
	}
}

.editor-meta {
	align-items: center;
	border-top: 1px solid var(--line);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	padding: .75rem 1rem;
}

.meta-field {
	align-items: center;
	display: flex;
	gap: .5rem;
}

.meta-field label {
	color: var(--ink-2);
	font-size: .875rem;
	font-weight: 500;
}

.meta-field select {
	appearance: none;
	background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6576' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .625rem center;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	cursor: pointer;
	font-family: inherit;
	font-size: .875rem;
	height: 2.5rem;
	outline: none;
	padding: 0 2rem 0 .75rem;
}

.meta-field select:focus {
	border-color: var(--accent);
	box-shadow: var(--focus);
}

.meta-toggle {
	align-items: center;
	color: var(--ink-2);
	cursor: pointer;
	display: flex;
	font-size: .875rem;
	font-weight: 500;
	gap: .625rem;
	min-height: 2.75rem;
}

.meta-toggle input {
	display: none;
}

.meta-toggle input:checked + .toogle {
	background: var(--accent);
}

.meta-toggle input:checked + .toogle::before {
	left: 1.375rem;
}

.help-text {
	color: var(--muted);
	display: block;
	font-size: .8125rem;
	line-height: 1.5;
	margin-left: auto;
}

.help-text code {
	background: var(--code-bg);
	border-radius: 4px;
	color: var(--ink-2);
	font-size: .75rem;
	padding: .125rem .375rem;
}

@media screen and (max-width: 768px) {
	.editor-tools {
		width: 100%;
	}

	.toolbar-divider {
		display: none;
	}

	.help-text {
		margin-left: 0;
	}
}

/* MARKDOWN DE LA VISTA PREVIA (mismo estilo que el visor público) */
.live-preview-content.markdown-body {
	background: transparent;
	color: var(--ink);
	font-family: var(--font-primary);
	font-size: .9375rem;
	line-height: 1.65;
}

.live-preview-content.markdown-body h1,
.live-preview-content.markdown-body h2 {
	border-bottom-color: var(--line);
	letter-spacing: -0.01em;
}

.live-preview-content.markdown-body a {
	color: var(--accent);
}

.live-preview-content.markdown-body table {
	overflow-x: auto;
	width: 100%;
}

.live-preview-content.markdown-body pre {
	background: var(--code-block-bg);
	border-radius: var(--radius);
	margin: 1.25rem 0;
	max-width: 100%;
	overflow-x: auto;
	padding: 1.25rem;
	white-space: pre-wrap;
	word-break: break-word;
}

.live-preview-content.markdown-body pre code {
	background: transparent;
	color: var(--code-block-fg);
	display: block;
	font-family: var(--font-mono);
	font-size: .8125rem;
	line-height: 1.6;
	padding: 0;
	white-space: pre-wrap;
	word-break: break-word;
}

.live-preview-content.markdown-body code {
	background: var(--code-bg);
	border-radius: 4px;
	color: var(--ink);
	font-family: var(--font-mono);
	font-size: .8125rem;
	padding: .125rem .375rem;
	word-break: break-word;
}

.live-preview-content.markdown-body blockquote {
	background: var(--code-bg);
	border-left: 0;
	border-radius: var(--radius);
	color: var(--ink-2);
	padding: .75rem 1rem;
}

.live-preview-content.markdown-body img {
	border-radius: var(--radius);
	height: auto;
	max-width: 100%;
}

/* MUSAS: botón + paleta */
.musa-selector-wrap,
.history-selector-wrap {
	position: relative;
}

.btn-musa,
.btn-history {
	align-items: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: .875rem;
	font-weight: 500;
	gap: .5rem;
	min-height: 2.5rem;
	padding: 0 .875rem;
	white-space: nowrap;
}

.btn-musa svg {
	color: var(--accent);
}

.btn-history svg {
	color: var(--muted);
}

.btn-musa:hover:not(:disabled),
.btn-history:hover {
	background: var(--code-bg);
}

.btn-musa:disabled {
	cursor: not-allowed;
	opacity: .5;
}

.musa-dropdown {
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
	max-height: 320px;
	overflow-y: auto;
	padding: .375rem;
	position: absolute;
	right: 0;
	top: calc(100% + .5rem);
	width: 22rem;
	z-index: 200;
}

.musa-dropdown-item {
	align-items: center;
	background: none;
	border: none;
	border-radius: var(--radius);
	color: var(--ink);
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: .875rem;
	gap: .75rem;
	justify-content: space-between;
	min-height: 2.75rem;
	padding: 0 .75rem;
	text-align: left;
	width: 100%;
}

.musa-dropdown-item:hover,
.musa-dropdown-item:focus-visible {
	background: var(--accent-soft);
}

.musa-dropdown-name {
	font-weight: 500;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.musa-dropdown-meta {
	color: var(--muted);
	flex-shrink: 0;
	font-family: var(--font-mono);
	font-size: .75rem;
	max-width: 50%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.musa-dropdown-empty {
	color: var(--muted);
	font-size: .875rem;
	padding: 1rem;
	text-align: center;
}

/* CHAT DE LA MUSA */
.ai-chat {
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	bottom: 1.5rem;
	box-shadow: var(--shadow-pop);
	display: flex;
	flex-direction: column;
	height: 480px;
	overflow: hidden;
	position: fixed;
	right: 1.5rem;
	width: 380px;
	z-index: 500;
}

.ai-chat.minimized {
	height: auto;
}

.ai-chat.minimized .ai-chat-body {
	display: none;
}

.ai-chat-header {
	align-items: center;
	background: var(--surface-alt);
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	cursor: grab;
	display: flex;
	flex-shrink: 0;
	justify-content: space-between;
	padding: .5rem .5rem .5rem 1rem;
	user-select: none;
}

.ai-chat-header:active {
	cursor: grabbing;
}

.ai-chat-title {
	font-size: .875rem;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ai-chat-title::before {
	background: var(--accent);
	border-radius: 50%;
	content: '';
	display: inline-block;
	height: .5rem;
	margin-right: .5rem;
	vertical-align: middle;
	width: .5rem;
}

.ai-chat-controls {
	display: flex;
	gap: .125rem;
}

.ai-chat-controls button,
.ai-history-close,
.history-modal-close-btn {
	background: transparent;
	border: none;
	border-radius: var(--radius);
	color: var(--muted);
	cursor: pointer;
	font-size: 1.125rem;
	height: 2rem;
	line-height: 1;
	width: 2rem;
}

.ai-chat-controls button:hover,
.ai-history-close:hover,
.history-modal-close-btn:hover {
	background: var(--code-bg);
	color: var(--ink);
}

.ai-chat-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
}

.ai-chat-messages {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: .625rem;
	overflow-y: auto;
	padding: .875rem;
}

.ai-chat-messages::-webkit-scrollbar {
	width: 4px;
}

.ai-chat-messages::-webkit-scrollbar-thumb {
	background: var(--line-strong);
	border-radius: 2px;
}

.ai-msg {
	border-radius: var(--radius-lg);
	font-size: .875rem;
	line-height: 1.55;
	max-width: 88%;
	padding: .625rem .875rem;
	word-break: break-word;
}

.ai-msg.user {
	align-self: flex-end;
	background: var(--accent);
	border-bottom-right-radius: 2px;
	color: var(--on-accent);
}

.ai-msg.assistant {
	align-self: flex-start;
	background: var(--code-bg);
	border-bottom-left-radius: 2px;
	color: var(--ink);
}

.ai-msg.assistant pre {
	background: var(--code-block-bg);
	border-radius: var(--radius);
	color: var(--code-block-fg);
	font-size: .8rem;
	margin: .5rem 0;
	overflow-x: auto;
	padding: .625rem;
	white-space: pre-wrap;
}

.ai-msg.assistant code {
	background: var(--line-soft);
	border-radius: 3px;
	font-size: .8rem;
	padding: .1rem .3rem;
}

.ai-chat-input {
	border-top: 1px solid var(--line);
	display: flex;
	gap: .5rem;
	padding: .625rem;
}

.ai-chat-input textarea {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	flex: 1;
	font-family: inherit;
	font-size: .875rem;
	line-height: 1.4;
	max-height: calc(1.4em * 3 + 1rem);
	outline: none;
	overflow-y: auto;
	padding: .5rem .625rem;
	resize: none;
}

.ai-chat-input textarea:focus {
	border-color: var(--accent);
	box-shadow: var(--focus);
}

.ai-chat-input button {
	align-items: center;
	align-self: flex-end;
	background: var(--accent);
	border: none;
	border-radius: var(--radius);
	color: var(--on-accent);
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

.ai-chat-input button:hover {
	background: var(--accent-hover);
}

.ai-chat-input button:disabled {
	cursor: not-allowed;
	opacity: .4;
}

/* POPUP DE SELECCIÓN */
.selection-popup {
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: .75rem;
	position: fixed;
	width: 300px;
	z-index: 600;
}

.selection-popup-actions {
	display: flex;
	gap: .25rem;
}

#selectionClose {
	margin-left: auto;
}

.selection-action-btn {
	align-items: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink-2);
	cursor: pointer;
	display: flex;
	font-family: inherit;
	font-size: .8125rem;
	gap: .375rem;
	min-height: 2rem;
	padding: 0 .625rem;
}

.selection-action-btn:hover {
	background: var(--code-bg);
	color: var(--ink);
}

.selection-action-btn.copied {
	background: var(--success-soft);
	border-color: var(--success);
	color: var(--success);
}

.selection-preview {
	background: var(--code-bg);
	border-radius: var(--radius);
	color: var(--ink-2);
	font-family: var(--font-mono);
	font-size: .75rem;
	line-height: 1.5;
	max-height: 5.5rem;
	overflow-y: auto;
	padding: .5rem .625rem;
	white-space: pre-wrap;
	word-break: break-word;
}

.selection-popup textarea {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	font-family: inherit;
	font-size: .875rem;
	outline: none;
	padding: .5rem .625rem;
	resize: none;
}

.selection-popup textarea:focus {
	border-color: var(--accent);
	box-shadow: var(--focus);
}

/* HISTORIAL DE CAMBIOS DE LA IA */
.history-badge {
	align-items: center;
	background: var(--accent);
	border-radius: 1rem;
	color: var(--on-accent);
	display: flex;
	font-family: var(--font-mono);
	font-size: .6875rem;
	height: 1.25rem;
	justify-content: center;
	min-width: 1.25rem;
	padding: 0 .3rem;
}

.ai-history-panel {
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
	display: flex;
	flex-direction: column;
	max-height: 440px;
	overflow: hidden;
	position: absolute;
	right: 0;
	top: calc(100% + .5rem);
	width: 22rem;
	z-index: 300;
}

.ai-history-header {
	align-items: center;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	display: flex;
	font-size: .875rem;
	font-weight: 600;
	justify-content: space-between;
	padding: .375rem .5rem .375rem 1rem;
}

.ai-history-list {
	display: flex;
	flex-direction: column;
	max-height: 380px;
	overflow-y: auto;
	padding: .25rem .5rem;
}

.history-empty {
	color: var(--muted);
	font-size: .875rem;
	padding: 1.5rem 1rem;
	text-align: center;
}

.history-entry {
	border-bottom: 1px solid var(--line-soft);
	display: flex;
	flex-direction: column;
	gap: .375rem;
	padding: .75rem .5rem;
}

.history-entry:last-child {
	border-bottom: none;
}

.history-entry-header {
	align-items: center;
	display: flex;
	gap: .5rem;
	justify-content: space-between;
}

.history-type {
	color: var(--ink);
	font-size: .8125rem;
	font-weight: 600;
}

.history-time {
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: .75rem;
	white-space: nowrap;
}

.history-preview {
	color: var(--ink-2);
	font-size: .8125rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.history-entry-actions {
	display: flex;
	gap: .375rem;
	justify-content: flex-end;
}

.history-preview-btn,
.history-delete-btn {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	cursor: pointer;
	font-family: inherit;
	font-size: .8125rem;
	min-height: 2rem;
	padding: 0 .625rem;
}

.history-preview-btn:hover {
	background: var(--accent-soft);
	border-color: var(--accent);
	color: var(--accent);
}

.history-delete-btn {
	color: var(--danger);
}

.history-delete-btn:hover {
	background: var(--danger-soft);
	border-color: var(--danger);
}

/* MODAL DE VISTA PREVIA DEL HISTORIAL */
.history-modal-overlay {
	align-items: center;
	background: var(--overlay);
	display: flex;
	height: 100vh;
	justify-content: center;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 1000;
}

.history-modal {
	background: var(--surface);
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-pop);
	display: flex;
	flex-direction: column;
	height: 90vh;
	max-width: 900px;
	overflow: hidden;
	width: 90vw;
}

.history-modal-header {
	align-items: center;
	border-bottom: 1px solid var(--line);
	display: flex;
	flex-shrink: 0;
	justify-content: space-between;
	padding: .75rem 1rem .75rem 1.25rem;
}

.history-modal-title {
	display: flex;
	flex-direction: column;
	gap: .125rem;
}

.history-modal-title span:first-child {
	color: var(--ink);
	font-size: 1rem;
	font-weight: 600;
}

.history-modal-meta {
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: .75rem;
}

.history-modal-body {
	flex: 1;
	overflow-y: auto;
	padding: 1.5rem 2rem;
}

.history-modal-footer {
	align-items: center;
	border-top: 1px solid var(--line);
	display: flex;
	flex-shrink: 0;
	justify-content: space-between;
	padding: .75rem 1.25rem;
}

.history-modal-footer-right {
	align-items: center;
	display: flex;
	gap: .5rem;
}

.history-modal-delete-btn {
	align-items: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--danger);
	cursor: pointer;
	display: flex;
	height: 2.5rem;
	justify-content: center;
	width: 2.5rem;
}

.history-modal-delete-btn:hover {
	background: var(--danger-soft);
	border-color: var(--danger);
}

/* RESPONSIVE */
@media (max-width: 768px) {
	.ai-chat {
		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
		bottom: 0;
		height: 60vh;
		left: 0;
		right: 0;
		width: 100%;
	}

	.musa-dropdown,
	.ai-history-panel {
		left: 0;
		right: auto;
		width: min(22rem, calc(100vw - 2rem));
	}

	.history-modal {
		border-radius: 0;
		height: 100vh;
		width: 100vw;
	}

	.history-modal-footer-right {
		flex: 1;
		flex-direction: column;
	}

	.history-modal-footer-right .btn,
	.history-modal-footer-right .btn-s {
		justify-content: center;
		width: 100%;
	}
}