/**
* Document TOC - Stylesheet
* Vanilla CSS for production-ready Table of Contents.
*/

:root {
	--toc-bg: transparent;
	--toc-border: none;
	--toc-shadow: none;
	--toc-text: #2c3e50;
	--toc-text-muted: #7f8c8d;
	--toc-accent: #3498db;
	--toc-accent-hover: #2980b9;
	--toc-bg-hover: rgba(52, 152, 219, 0.05);
	--toc-bg-active: rgba(52, 152, 219, 0.1);
	--toc-radius: 0;
	--toc-skeleton-bg: #f2f2f2;
	--toc-skeleton-shine: #e0e0e0;
	--expanded-height: 500px;

	--toc-base-color: var(--gcid-primary-color, #333333);
	--toc-accent: var(--toc-base-color);
	--toc-bg-hover: color-mix(in srgb, var(--toc-base-color), transparent 95%);
	--toc-bg-active: color-mix(in srgb, var(--toc-base-color), transparent 90%);
	@supports not (color: color-mix(in srgb, red, blue)) {
		--toc-bg-hover: rgba(0, 0, 0, 0.05); /* Gris muy claro neutro */
		--toc-bg-active: rgba(0, 0, 0, 0.1);  /* Gris claro neutro */
	}
}

/* Dark mode compatibility auto-detection */
@media (prefers-color-scheme: dark) {
	:root {
		--toc-bg: transparent;
		--toc-border: none;
		--toc-shadow: none;
		--toc-text: #2c3e50;
		--toc-text-muted: #7f8c8d;
		--toc-accent: #3498db;
		--toc-accent-hover: #2980b9;
		--toc-bg-hover: rgba(52, 152, 219, 0.05);
		--toc-bg-active: rgba(52, 152, 219, 0.1);
		--toc-radius: 0;
		--toc-skeleton-bg: #f2f2f2;
		--toc-skeleton-shine: #e0e0e0;
		--expanded-height: 500px;

		--toc-base-color: var(--gcid-primary-color, #333333);
		--toc-accent: var(--toc-base-color);
		--toc-bg-hover: color-mix(in srgb, var(--toc-base-color), transparent 95%);
		--toc-bg-active: color-mix(in srgb, var(--toc-base-color), transparent 90%);
		@supports not (color: color-mix(in srgb, red, blue)) {
			--toc-bg-hover: rgba(0, 0, 0, 0.05); /* Gris muy claro neutro */
			--toc-bg-active: rgba(0, 0, 0, 0.1);  /* Gris claro neutro */
		}
	}
}

/* Layout container */
.document-toc {
	background: var(--toc-bg);
	border: 1px solid var(--toc-border);
	border-radius: var(--toc-radius);
	box-shadow: var(--toc-shadow);
	max-width: 100%;
	padding-right: 15px;
	box-sizing: border-box;
	height: 100%;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--toc-border) transparent;
	transition: opacity 400ms ease, transform 400ms ease-in-out, height 400ms ease-in-out, max-height 400ms ease-in-out;
	will-change: transform, opacity, height, max-height;
	opacity: 1;
	transform: translateY(0);
}

.hoo-is-hidden + #et-main-area .document-toc {
	transition: opacity 400ms ease, transform 400ms ease-in-out, height 400ms ease-in-out, max-height 400ms ease-in-out;
}

/* Scrollbar Customization */
.document-toc::-webkit-scrollbar {
	width: 6px;
}
.document-toc::-webkit-scrollbar-track {
	background: transparent;
}
.document-toc::-webkit-scrollbar-thumb {
	background-color: var(--toc-border);
	border-radius: 10px;
}

/* Title */
.document-toc__title {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--toc-text);
	margin: 0 0 16px 0;
	padding: 0;
	letter-spacing: -0.02em;
	border-bottom: 2px solid var(--toc-border);
	padding-bottom: 12px;
}

/* Lists styling */
.document-toc__list,
.document-toc__list ol {
	list-style: none !important;
	margin: 0;
	padding: 0;
}

.document-toc__list > .document-toc__group {
	margin-bottom: 1px;
}

.document-toc__list > .document-toc__group:last-child {
	margin-bottom: 0;
}

.document-toc__header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
}

/* Base button and link style resets */
.document-toc__toggle-link,
.document-toc__link {
	display: flex;
	align-items: center;
	flex-grow: 1;
	border: none;
	background: transparent;
	text-align: left;
	padding: 8px 12px;
	margin: 0;
	font-size: 0.95rem;
	font-family: inherit;
	color: var(--toc-text);
	cursor: pointer;
	border-radius: 6px;
	transition: background-color 0.2s ease, color 0.2s ease;
	outline: none;
	box-sizing: border-box;
}

.document-toc__arrow-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: 6px;
	transition: background-color 0.2s ease, color 0.2s ease;
	outline: none;
	margin-left: 4px;
	flex-shrink: 0;
	color: var(--toc-text-muted);
	box-sizing: border-box;
}

.document-toc__toggle-link:hover,
.document-toc__link:hover,
.document-toc__arrow-btn:hover {
	background-color: var(--toc-bg-hover);
	color: var(--toc-accent);
}

.document-toc__toggle-link:focus-visible,
.document-toc__link:focus-visible,
.document-toc__arrow-btn:focus-visible {
	outline: 2px solid var(--toc-accent);
	outline-offset: -2px;
}

/* CSS-Only Arrow (Chevron) */
.document-toc__arrow {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-bottom: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg); /* Pointing down by default */
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	flex-shrink: 0;
	margin-top: -3px; /* Visual alignment offset */
}

/* Active H2 Arrow Rotation */
.document-toc__group.is-active .document-toc__arrow {
	transform: rotate(-135deg); /* Pointing up when active */
}

/* Number & Text spacing */
.document-toc__number {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--toc-text-muted);
	margin-right: 8px;
	min-width: 24px;
}

.document-toc__text {
	font-weight: 500;
	line-height: 1.4;
}

/* Nested lists (H3 container) */
.document-toc__group {
  display: grid;
  grid-template-rows: auto 0fr;
  transition: grid-template-rows 0.5s ease;
  overflow: hidden;
}
.document-toc__group.is-active {
  grid-template-rows: auto 1fr;
}
.document-toc__group ol {
  min-height: 0;
  display: block; /* Vuelve a block, no necesita ser grid */
  max-height: none !important; /* ELIMINA el max-height que te está cortando */
  overflow: visible; /* Deja que el padre (el grid) controle el recorte */
}
.document-toc__group ol > li {
  min-height: 0;
}
.document-toc__group > ol {
	overflow: hidden;
	max-height: 0;
	opacity: 0;
	transition: max-height 720ms cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
	padding-left: 20px;
	margin-top: 2px;
}

/* Active H2 opens its H3 list */
.document-toc__group.is-active > ol {
	max-height: var(--expanded-height, 500px);
	opacity: 1;
}

/* H3 items */
.document-toc__group > ol li {
	margin-bottom: 2px;
}

.document-toc__group > ol li:last-child {
	margin-bottom: 0;
}

.document-toc__link {
	font-size: 0.9rem;
	color: var(--toc-text-muted);
	padding: 6px 12px;
	width: 100%;
}

/* Highlight/Current State classes */
.document-toc__group.is-active .document-toc__toggle-link {
	color: var(--toc-accent);
	background-color: var(--toc-bg-active);
}

.document-toc__link.is-current {
	color: var(--toc-accent);
	font-weight: 600;
	background-color: var(--toc-bg-active);
}

/* --- Skeleton State and Skeleton Loader Animation --- */

@keyframes toc-shimmer {
	0% {
		background-position: -200% 0;
	}
	100% {
		background-position: 200% 0;
	}
}

.document-toc--skeleton {
	pointer-events: none;
	user-select: none;
}

.document-toc__skeleton-item {
	margin-bottom: 12px;
}

.document-toc__skeleton-bar {
	height: 14px;
	background: linear-gradient(
		90deg,
		var(--toc-skeleton-bg) 25%,
		var(--toc-skeleton-shine) 37%,
		var(--toc-skeleton-bg) 63%
	);
	background-size: 200% 100%;
	animation: toc-shimmer 1.5s infinite linear;
	border-radius: 4px;
}

.document-toc__skeleton-bar--title {
	width: 100%;
	margin-top: 8px;
	margin-bottom: 8px;
	height: 21px;
}

.document-toc__skeleton-bar--subtitle {
	width: 50%;
	margin-left: 20px;
	margin-top: 6px;
	height: 12px;
}

/* --- Transition/Loaded Animation --- */

/* Rebuilt TOC initial state for smooth fade-in */
.document-toc--transitioning {
	opacity: 0;
	transform: translateY(8px);
}

/* --- Always Open Override (data-collapsible="false") --- */
.document-toc[data-collapsible="false"] .document-toc__group > ol {
	max-height: none !important;
	opacity: 1 !important;
	display: block !important;
}

.document-toc[data-collapsible="false"] .document-toc__arrow-btn {
	display: none !important;
}