/*
 * CONFIANZA WIKI - Estilo Monocromático FINAL
 * Inspirado en Vercel / Linear
 * 
 * Tipografía: Inter
 * Paleta: Monocromático puro
 */

/* ============================================================================
   IMPORTAR TIPOGRAFÍA - Computer Modern (LaTeX/IEEE) + Inter (UI)
   ============================================================================ */

/* Computer Modern Serif — LaTeX/IEEE body font (4 variants) */
@font-face {
  font-family: 'Computer Modern Serif';
  src: url('https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts@latest/font/Serif/cmunrm.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Computer Modern Serif';
  src: url('https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts@latest/font/Serif/cmunbx.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Computer Modern Serif';
  src: url('https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts@latest/font/Serif/cmunti.woff') format('woff');
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Computer Modern Serif';
  src: url('https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts@latest/font/Serif/cmunbi.woff') format('woff');
  font-weight: bold;
  font-style: italic;
  font-display: swap;
}

/* Computer Modern Typewriter — LaTeX monospace (2 variants) */
@font-face {
  font-family: 'Computer Modern Typewriter';
  src: url('https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts@latest/font/Typewriter/cmuntt.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Computer Modern Typewriter';
  src: url('https://cdn.jsdelivr.net/gh/aaaakshat/cm-web-fonts@latest/font/Typewriter/cmuntb.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Inter — UI/sidebar sans-serif */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ============================================================================
   VARIABLES - MONOCROMÁTICO PURO
   ============================================================================ */

.theme-dark {
	/* Fondos - NEGRO PURO para contenido */
	--bg1: #000000;
	--bg2: #0A0A0A;
	--bg3: #111111;
	
	/* Sidebar */
	--sidebar-bg: #0A0A0A;
	
	/* Bordes / UI */
	--ui1: #1A1A1A;
	--ui2: #262626;
	--ui3: #333333;
	
	/* Texto - más claro */
	--tx1: #F5F5F5;
	--tx2: #B0B0B0;
	--tx3: #808080;
	
	/* Scrollbar */
	--scrollbar-bg: #0A0A0A;
	--scrollbar-thumb: #333333;
}

.theme-light {
	/* Fondos - BLANCO PURO para contenido */
	--bg1: #FFFFFF;
	--bg2: #FAFAFA;
	--bg3: #F5F5F5;
	
	/* Sidebar */
	--sidebar-bg: #FAFAFA;
	
	/* Bordes / UI */
	--ui1: #E5E5E5;
	--ui2: #D4D4D4;
	--ui3: #A3A3A3;
	
	/* Texto - más oscuro */
	--tx1: #0A0A0A;
	--tx2: #525252;
	--tx3: #737373;
	
	/* Scrollbar */
	--scrollbar-bg: #FAFAFA;
	--scrollbar-thumb: #D4D4D4;
}

.theme-dark, .theme-light {
	--background-primary: var(--bg1);
	--background-secondary: var(--bg2);
	--background-modifier-border: var(--ui1);
	--text-normal: var(--tx1);
	--text-muted: var(--tx2);
	--text-faint: var(--tx3);
}

/* ============================================================================
   SCROLLBAR - Sutil
   ============================================================================ */

::-webkit-scrollbar {
	width: 8px !important;
	height: 8px !important;
}

::-webkit-scrollbar-track {
	background: var(--scrollbar-bg) !important;
}

::-webkit-scrollbar-thumb {
	background: var(--scrollbar-thumb) !important;
	border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--ui3) !important;
}

/* Firefox */
* {
	scrollbar-width: thin !important;
	scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg) !important;
}

/* ============================================================================
   BASE - TIPOGRAFÍA INTER
   ============================================================================ */

body {
	--font-text-size: 16px;
	--font-small: 13px;
	--font-smaller: 11px;
	--image-radius: 6px;
	
	/* Computer Modern Serif para contenido académico */
	font-family: "Computer Modern Serif", "Latin Modern Roman", "Times New Roman", Times, serif !important;
	font-size: 16px !important;
}

.published-container {
	--sidebar-left-background: var(--sidebar-bg);
	padding-bottom: 50px !important; /* Espacio para el footer */
}

/* ============================================================================
   ÁREA DE CONTENIDO - BLANCO/NEGRO PURO
   ============================================================================ */

.publish-article-view,
.markdown-preview-view,
.site-body-right-column {
	background: var(--bg1) !important;
}

/* ============================================================================
   OCULTAR NOMBRE DEL SITIO
   ============================================================================ */

/* OCULTAR TÍTULO COMPLETAMENTE */
.site-body-left-column-site-name,
.publish-site-name,
.site-body-left-column-site-name a,
.nav-view-outer .site-body-left-column-site-name,
.site-header .site-body-left-column-site-name,
.theme-light .site-body-left-column-site-name,
.theme-dark .site-body-left-column-site-name {
	display: none !important;
	font-size: 0 !important;
	color: transparent !important;
	visibility: hidden !important;
	height: 0 !important;
	width: 0 !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
	max-height: 0 !important;
	line-height: 0 !important;
}

.site-body-left-column-site-logo,
.publish-site-logo {
	display: block !important;
	visibility: visible !important;
}

/* ============================================================================
   LOGOS AUTO-SWITCH - Dark/Light Mode
   ============================================================================ */

/* Ocultar logo default de Obsidian */
.site-header .site-body-left-column-site-logo img {
	display: none !important;
}

/* Logo automático con pseudo-elemento */
.site-header .site-body-left-column-site-logo::before {
	content: '';
	display: block;
	width: 110px;
	height: 33px;
	background-image: url('latam.wiki logo negro.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin: 16px auto;
	transition: opacity 0.2s ease;
}

/* Logo blanco en dark mode con múltiples selectores */
.theme-dark .site-body-left-column-site-logo::before,
.is-dark-theme .site-body-left-column-site-logo::before,
body.theme-dark .site-body-left-column-site-logo::before,
.theme-dark .site-header .site-body-left-column-site-logo::before {
	background-image: url('latam wiki logo blanco.png') !important;
	filter: none !important;
}

/* ============================================================================
   TÍTULO - INTER SEMIBOLD
   ============================================================================ */

.page-header .page-title,
.publish-article-heading,
h1.publish-article-heading,
.inline-title,
.markdown-preview-view h1:first-of-type {
	font-family: 'Computer Modern Serif', 'Times New Roman', serif !important;
	font-weight: bold !important;
	font-size: 2.25em !important;
	line-height: 1.2 !important;
	letter-spacing: -0.015em !important;
	color: var(--tx1) !important;
	border-bottom: none !important;
	margin-bottom: 0.5em !important;
}

.markdown-preview-view h2 {
	font-family: 'Computer Modern Serif', serif !important;
	font-weight: bold !important;
	font-size: 1.5em !important;
	letter-spacing: -0.015em !important;
	color: var(--tx1) !important;
	margin-top: 2em !important;
	margin-bottom: 0.75em !important;
	border: none !important;
}

.markdown-preview-view h3 {
	font-family: 'Computer Modern Serif', serif !important;
	font-weight: bold !important;
	font-size: 1.25em !important;
	letter-spacing: -0.01em !important;
	color: var(--tx1) !important;
	margin-top: 1.5em !important;
	margin-bottom: 0.5em !important;
}

.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
	font-family: 'Computer Modern Serif', serif !important;
	font-weight: bold !important;
	font-size: 1.125em !important;
	color: var(--tx1) !important;
}

/* ============================================================================
   TEXTO - INTER NORMAL
   ============================================================================ */

.markdown-preview-view,
.publish-article-view {
	font-family: 'Computer Modern Serif', 'Times New Roman', serif !important;
	font-weight: normal !important;
	font-size: var(--font-text-size) !important;
	color: var(--tx1) !important;
	max-width: 720px !important;
	padding: 2rem !important;
	line-height: 1.7 !important;
}

.markdown-preview-view p {
	font-family: 'Computer Modern Serif', serif !important;
	font-weight: normal !important;
	line-height: 1.7 !important;
	margin-bottom: 1.25em !important;
	color: var(--tx1) !important;
}

/* ============================================================================
   ENLACES - MONOCROMÁTICO
   ============================================================================ */

/* Breadcrumbs grises */
.markdown-preview-view sub a,
.markdown-preview-view sub {
	color: var(--tx3) !important;
	text-decoration: none !important;
	font-size: 11px !important;
}

.markdown-preview-view sub a:hover {
	color: var(--tx2) !important;
}

/* Wikilinks internos - grises sin morado */
.markdown-preview-view a.internal-link,
.internal-link,
a.internal-link {
	color: var(--tx1) !important;
	text-decoration: none !important;
	border-bottom: 1px solid var(--tx3) !important;
	transition: border-color 0.15s ease !important;
}

.markdown-preview-view a.internal-link:hover,
.internal-link:hover,
a.internal-link:hover {
	border-bottom-color: var(--tx1) !important;
}

.markdown-preview-view a:not(.tag),
.markdown-preview-view p a,
.markdown-preview-view li a:not(.backlinks a) {
	color: var(--tx1) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	text-decoration-thickness: 1px !important;
	text-decoration-color: var(--tx3) !important;
	transition: text-decoration-color 0.15s ease !important;
}

.markdown-preview-view a:not(.tag):hover,
.markdown-preview-view p a:hover,
.markdown-preview-view li a:hover {
	text-decoration-color: var(--tx1) !important;
}

/* ============================================================================
   TAGS - MÁS PEQUEÑOS
   ============================================================================ */

.markdown-preview-view .tag,
a.tag {
	text-decoration: none !important;
	background: transparent !important;
	border: 1px solid var(--ui2) !important;
	border-radius: 3px !important;
	padding: 0.1em 0.4em !important;
	font-size: 10px !important;
	color: var(--tx3) !important;
	font-weight: 500 !important;
	vertical-align: middle !important;
}

.markdown-preview-view .tag:hover,
a.tag:hover {
	border-color: var(--tx3) !important;
	color: var(--tx2) !important;
}

/* ============================================================================
   FECHA / METADATA
   ============================================================================ */

.markdown-preview-view .callout + p,
.markdown-preview-view p:has(.tag) {
	font-size: 13px !important;
	color: var(--tx3) !important;
	margin-bottom: 1.5em !important;
}

/* ============================================================================
   CALLOUTS - MONOCROMÁTICO
   ============================================================================ */

.callout {
	background: var(--bg2) !important;
	border: 1px solid var(--ui1) !important;
	border-radius: 6px !important;
	padding: 12px 16px !important;
	margin: 1em 0 !important;
}

.callout[data-callout="info"] {
	background: var(--bg2) !important;
	border: 1px solid var(--ui2) !important;
	border-left: 3px solid var(--tx3) !important;
}

.callout .callout-title {
	color: var(--tx2) !important;
	font-weight: 500 !important;
	font-size: 13px !important;
}

.callout-icon {
	display: none !important;
}

/* Callout Links */
.callout[data-callout="links"],
.callout[data-callout="link"] {
	background: var(--bg2) !important;
	border: 1px solid var(--ui1) !important;
}

.callout[data-callout="links"] .callout-title,
.callout[data-callout="link"] .callout-title {
	color: var(--tx2) !important;
	font-weight: 600 !important;
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}

.callout[data-callout="links"] .callout-content ul,
.callout[data-callout="link"] .callout-content ul {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 10px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0.5rem 0 0 0 !important;
}

.callout[data-callout="links"] .callout-content li,
.callout[data-callout="link"] .callout-content li {
	background: var(--bg1) !important;
	border: 1px solid var(--ui1) !important;
	border-radius: 4px !important;
	padding: 10px 14px !important;
	margin: 0 !important;
	list-style: none !important;
}

.callout[data-callout="links"] .callout-content li:hover,
.callout[data-callout="link"] .callout-content li:hover {
	border-color: var(--ui3) !important;
}

.callout[data-callout="links"] .callout-content li a,
.callout[data-callout="link"] .callout-content li a {
	color: var(--tx1) !important;
	text-decoration: none !important;
	font-size: 13px !important;
}

@media (max-width: 768px) {
	.callout[data-callout="links"] .callout-content ul {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 500px) {
	.callout[data-callout="links"] .callout-content ul {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================================
   LISTAS DESPUÉS DE H2/H3 = CARDS
   ============================================================================ */

.markdown-preview-view h2 ~ ul,
.markdown-preview-view h3 ~ ul {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 12px !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0.5rem 0 1.5rem 0 !important;
}

.markdown-preview-view h2 ~ ul > li,
.markdown-preview-view h3 ~ ul > li {
	background: var(--bg2) !important;
	border: 1px solid var(--ui1) !important;
	border-radius: 6px !important;
	padding: 12px 16px !important;
	margin: 0 !important;
	list-style: none !important;
	transition: border-color 0.15s ease !important;
}

.markdown-preview-view h2 ~ ul > li:hover,
.markdown-preview-view h3 ~ ul > li:hover {
	border-color: var(--ui3) !important;
}

.markdown-preview-view h2 ~ ul > li a,
.markdown-preview-view h3 ~ ul > li a {
	color: var(--tx1) !important;
	text-decoration: none !important;
	font-size: 14px !important;
	font-weight: 500 !important;
}

.markdown-preview-view h2 ~ ul > li::marker,
.markdown-preview-view h3 ~ ul > li::marker {
	content: "" !important;
	display: none !important;
}

@media (max-width: 900px) {
	.markdown-preview-view h2 ~ ul,
	.markdown-preview-view h3 ~ ul {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 500px) {
	.markdown-preview-view h2 ~ ul,
	.markdown-preview-view h3 ~ ul {
		grid-template-columns: 1fr !important;
	}
}

/* ============================================================================
   BACKLINKS - Pequeños y grisáceos
   ============================================================================ */

.backlinks {
	margin-top: 3rem !important;
	padding-top: 1.5rem !important;
	border-top: 1px solid var(--ui1) !important;
}

.backlinks .backlinks-title,
.backlinks h2 {
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--tx3) !important;
	margin-bottom: 1rem !important;
}

.backlinks ul {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.backlinks li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.backlinks a {
	color: var(--tx3) !important;
	text-decoration: none !important;
	font-size: 13px !important;
	line-height: 1.8 !important;
	display: block !important;
}

.backlinks a:hover {
	color: var(--tx2) !important;
}

/* ============================================================================
   SIDEBAR - Monocromático
   ============================================================================ */

.site-body-left-column {
	background: var(--sidebar-bg) !important;
	border-right: 1px solid var(--ui1) !important;
}

.nav-file-title,
.nav-folder-title,
.tree-item-self {
	font-family: 'Inter', sans-serif !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	color: var(--tx2) !important;
	padding: 6px 12px !important;
	border-radius: 4px !important;
	transition: background 0.15s ease, color 0.15s ease !important;
}

.nav-file-title:hover,
.nav-folder-title:hover {
	background: var(--ui1) !important;
	color: var(--tx1) !important;
}

.nav-file-title.is-active {
	background: var(--ui1) !important;
	color: var(--tx1) !important;
	font-weight: 500 !important;
}

/* ============================================================================
   CÓDIGO
   ============================================================================ */

.markdown-preview-view code {
	font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace !important;
	font-size: 0.85em !important;
	background: var(--bg2) !important;
	border: 1px solid var(--ui1) !important;
	padding: 0.15em 0.4em !important;
	border-radius: 4px !important;
	color: var(--tx1) !important;
}

.markdown-preview-view pre {
	background: var(--bg2) !important;
	border: 1px solid var(--ui1) !important;
	padding: 1rem !important;
	border-radius: 6px !important;
	overflow-x: auto !important;
}

.markdown-preview-view pre code {
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
}

/* ============================================================================
   TABLAS
   ============================================================================ */

.markdown-preview-view table {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 1.5em 0 !important;
	font-size: 14px !important;
}

.markdown-preview-view th,
.markdown-preview-view td {
	padding: 10px 14px !important;
	border: 1px solid var(--ui1) !important;
	text-align: left !important;
}

.markdown-preview-view th {
	background: var(--bg2) !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.03em !important;
	color: var(--tx2) !important;
}

/* ============================================================================
   BLOCKQUOTES
   ============================================================================ */

.markdown-preview-view blockquote:not(.callout) {
	border-left: 2px solid var(--ui2) !important;
	padding-left: 1rem !important;
	margin: 1.5em 0 !important;
	color: var(--tx2) !important;
	font-style: normal !important;
}

/* ============================================================================
   HR
   ============================================================================ */

.markdown-preview-view hr {
	border: none !important;
	border-top: 1px solid var(--ui1) !important;
	margin: 2.5rem 0 !important;
}

/* Ocultar HR al final */
.markdown-preview-view > hr:last-of-type,
.markdown-preview-view > div:last-child hr,
.markdown-preview-section:last-child hr {
	display: none !important;
}

/* ============================================================================
   IMÁGENES
   ============================================================================ */

.markdown-preview-view img {
	max-width: 100% !important;
	border-radius: var(--image-radius) !important;
}

/* ============================================================================
   BREADCRUMBS - SIEMPRE VISIBLES
   ============================================================================ */

/* Breadcrumbs en página (mostrar siempre) */
.breadcrumbs,
.page-header .breadcrumbs,
.publish-article-header .breadcrumbs {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
	margin-bottom: 1rem !important;
	padding-bottom: 0.5rem !important;
	border-bottom: 1px solid var(--ui1) !important;
}

/* Estilo breadcrumb items */
.breadcrumbs a,
.breadcrumb-item,
.breadcrumb-link {
	font-family: 'Inter', sans-serif !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	color: var(--tx3) !important;
	text-decoration: none !important;
	transition: color 0.15s ease !important;
}

.breadcrumbs a:hover,
.breadcrumb-link:hover {
	color: var(--tx1) !important;
}

/* Separador breadcrumb */
.breadcrumbs .breadcrumb-separator,
.breadcrumb-separator {
	color: var(--tx3) !important;
	margin: 0 6px !important;
	opacity: 0.4 !important;
}

/* Breadcrumb actual (no link) */
.breadcrumbs .breadcrumb-current,
.breadcrumb-current {
	color: var(--tx1) !important;
	font-weight: 500 !important;
}

/* Si hay tags en breadcrumb area, estilarlos */
.breadcrumbs .tag {
	margin-left: 8px !important;
	font-size: 10px !important;
	vertical-align: middle !important;
}

/* ============================================================================
   FOOTER PERSONALIZADO - Powered by Micelios
   (El JS inyecta el HTML, aquí solo estilos)
   ============================================================================ */

.custom-footer {
	position: fixed !important;
	bottom: 0 !important;
	left: 0 !important;
	right: 0 !important;
	padding: 12px 20px !important;
	background: var(--bg1) !important;
	border-top: 1px solid var(--ui1) !important;
	font-family: 'Inter', sans-serif !important;
	font-size: 11px !important;
	color: var(--tx3) !important;
	text-align: center !important;
	z-index: 1000 !important;
}

.custom-footer a {
	color: var(--tx2) !important;
	text-decoration: none !important;
	transition: color 0.15s ease !important;
}

.custom-footer a:hover {
	color: var(--tx1) !important;
}

/* Ocultar footer original de Obsidian */
.publish-footer,
.obsidian-footer {
	display: none !important;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
	.markdown-preview-view,
	.publish-article-view {
		padding: 1rem !important;
	}
	
	.page-header .page-title,
	h1.publish-article-heading {
		font-size: 1.75em !important;
	}
	
	.custom-footer {
		font-size: 10px !important;
		padding: 10px 15px !important;
	}
}

/* ============================================================================
   OCULTAR TOOLTIP
   ============================================================================ */

.tooltip {
	display: none !important;
}