/* Obsidian Callouts — paleta por defecto de Obsidian, mapeada por tipo */

.oc-callout[data-callout="note"],
.oc-callout[data-callout="info"],
.oc-callout[data-callout="todo"],
.oc-callout[data-callout="comentario"] {
	--oc-color: #2e83f7;
	--oc-bg: rgba(46, 131, 247, .08);
}

.oc-callout[data-callout="tip"] {
	--oc-color: #08b7a5;
	--oc-bg: rgba(8, 183, 165, .08);
}

.oc-callout[data-callout="success"] {
	--oc-color: #08b94e;
	--oc-bg: rgba(8, 185, 78, .08);
}

.oc-callout[data-callout="question"],
.oc-callout[data-callout="warning"],
.oc-callout[data-callout="alerta"] {
	--oc-color: #e0a325;
	--oc-bg: rgba(224, 163, 37, .1);
}

.oc-callout[data-callout="failure"],
.oc-callout[data-callout="danger"],
.oc-callout[data-callout="bug"] {
	--oc-color: #e5484d;
	--oc-bg: rgba(229, 72, 77, .08);
}

.oc-callout[data-callout="example"],
.oc-callout[data-callout="ejemplo"] {
	--oc-color: #8a63f2;
	--oc-bg: rgba(138, 99, 242, .08);
}

.oc-callout[data-callout="quote"] {
	--oc-color: #9e9e9e;
	--oc-bg: rgba(158, 158, 158, .08);
}

/* Caja */
.oc-callout {
	--oc-color: #2e83f7;
	--oc-bg: rgba(46, 131, 247, .08);
	border-radius: 8px;
	border-left: 4px solid var(--oc-color);
	background: var(--oc-bg);
	padding: .1em 1.1em .9em;
	margin: 1.5em 0;
}

.oc-callout__title {
	display: flex;
	align-items: center;
	gap: .5em;
	font-weight: 600;
	color: var(--oc-color);
	margin: .8em 0 .4em;
	line-height: 1.3;
}

.oc-callout__icon {
	display: inline-flex;
	flex-shrink: 0;
}

.oc-callout__icon svg {
	display: block;
}

/* Tipos "comentario"/"ejemplo"/"alerta" (marcadores de bloque) usan icono
   FontAwesome (fa-solid) en vez del SVG inline; se alinean igual dentro del título. */
.oc-callout__icon i {
	font-size: .95em;
	line-height: 1;
}

.oc-callout__title-text {
	flex: 1;
}

.oc-callout__content {
	color: inherit;
}

.oc-callout__content > *:first-child {
	margin-top: 0;
}

.oc-callout__content > *:last-child {
	margin-bottom: 0;
}

.oc-callout__content p,
.oc-callout__content ul,
.oc-callout__content ol {
	margin: .5em 0;
}

/* Plegables: [!tipo]- (cerrado) / [!tipo]+ (abierto) */
.oc-callout.is-foldable .oc-callout__title {
	cursor: pointer;
	user-select: none;
}

.oc-callout__fold-icon {
	margin-left: auto;
	transition: transform .15s ease;
	font-size: .85em;
}

.oc-callout__fold-icon::before {
	content: "▸";
}

.oc-callout.is-foldable:not(.is-collapsed) .oc-callout__fold-icon {
	transform: rotate(90deg);
}

.oc-callout.is-collapsed .oc-callout__content {
	display: none;
}

/* Marcador inline [clic] -> <span class="oc-clic"><i class="oc-clic__icon fa-solid fa-arrow-pointer"></i> clic</span> */
.oc-clic {
	font-weight: 600;
	white-space: nowrap;
}

.oc-clic__icon {
	margin-right: .25em;
	color: #2e83f7;
}

/* Marcador [ruta]...[/ruta] -> fila de "pastillas" tipo breadcrumb. Se usa tanto
   suelto en su propia línea (típicamente "## Acceso" de los manuales) como embebido
   en medio de una oración, por eso es "inline-flex" (fluye con el texto, no fuerza
   salto de línea) en vez de "flex" (que es de bloque). Reusa la misma paleta azul
   que note/info/comentario (--oc-color) para el tramo activo (el que resalta dónde
   está parado el usuario). Tamaño/padding pensados para no quedar pesados a mitad
   de párrafo, manteniendo el mismo parecido visual cuando aparece solo. */
.oc-ruta {
	--oc-ruta-color: #2e83f7;
	--oc-ruta-bg: rgba(46, 131, 247, .08);
	--oc-ruta-inactivo-color: #47505c;
	--oc-ruta-inactivo-bg: #e1e5eb;
	--oc-ruta-inactivo-border: #ccd2da;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35em;
	vertical-align: middle;
}

/* Fondo un poco más oscuro + borde propio (en vez de depender solo del fondo):
   si el sitio usa un fondo de página con algo de color (no blanco puro), un
   gris casi blanco como el que había antes (#eef0f2) se fundía con él y la
   pastilla quedaba invisible. El borde asegura que se note el límite de la
   pastilla sin importar el tono exacto de fondo de la página. */
.oc-ruta__item {
	display: inline-flex;
	align-items: center;
	gap: .35em;
	padding: .2em .65em;
	border-radius: 999px;
	background: var(--oc-ruta-inactivo-bg);
	border: 1px solid var(--oc-ruta-inactivo-border);
	color: var(--oc-ruta-inactivo-color);
	font-size: .9em;
	line-height: 1.4;
}

.oc-ruta__item--activo {
	background: var(--oc-ruta-bg);
	color: var(--oc-ruta-color);
	font-weight: 600;
}

.oc-ruta__icon {
	font-size: .85em;
}

.oc-ruta__chevron {
	color: var(--oc-ruta-inactivo-color);
	font-size: .75em;
	opacity: .6;
}

/* Listas numeradas -> pasos con círculo numerado + línea conectora vertical.
   El número lo genera counter() sobre el propio <li>, así no importa cuántos
   pasos tenga la lista ni si el autor reordena/agrega uno. El último paso se
   resalta en azul sólido (mismo criterio que ".oc-ruta__item--activo": el
   tramo/paso final se destaca del resto). */
.oc-pasos {
	--oc-pasos-color: #2e83f7;
	list-style: none !important;
	margin: 1.5em 0;
	padding: 0;
	counter-reset: oc-pasos;
}

/* "!important" en list-style: el bloque "Lista numerada" de Gutenberg (clase
   "wp-block-list") o el propio tema pueden traer su numeración nativa con la
   misma especificidad que ".oc-pasos", y según el orden de carga le ganaban
   a esta regla — se veía el número nativo del navegador ("1.") duplicado
   junto al círculo. Se fuerza acá para no depender de ese orden de carga. */
.oc-pasos > li {
	position: relative;
	list-style: none !important;
	counter-increment: oc-pasos;
	padding: .1em 0 1.5em 2.6em;
	min-height: 1.8em;
}

.oc-pasos > li:last-child {
	padding-bottom: 0;
}

.oc-pasos > li::before {
	content: counter(oc-pasos);
	position: absolute;
	left: 0;
	top: 0;
	width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
	border: 2px solid var(--oc-pasos-color);
	color: var(--oc-pasos-color);
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: .85em;
	line-height: 1;
	z-index: 1;
}

.oc-pasos > li::after {
	content: "";
	position: absolute;
	left: calc(.9em - 1px);
	top: 1.8em;
	bottom: 0;
	width: 2px;
	background: var(--oc-pasos-color);
	opacity: .35;
}

.oc-pasos > li:last-child::after {
	display: none;
}

.oc-pasos > li:last-child::before {
	background: var(--oc-pasos-color);
	color: #fff;
}

/* Nota: este plugin NO adapta sus colores a "prefers-color-scheme: dark".
   El contenido se inserta dentro del tema de WordPress, cuyo fondo real no
   tiene por qué ser oscuro solo porque el SO/navegador del visitante prefiera
   modo oscuro (la mayoría de los temas/BetterDocs mantienen fondo claro fijo).
   Se probó una versión con @media (prefers-color-scheme: dark) y en sitios
   reales con fondo claro pero preferencia de SO oscura, los textos quedaban
   lavados/casi invisibles (colores pensados para fondo oscuro, sobre un
   fondo en realidad claro). Por eso se usa un único diseño, pensado para
   leerse bien sobre fondo claro/neutro (el caso normal del área de contenido
   de un sitio WordPress). Si en el futuro hace falta soporte real de modo
   oscuro, tendría que activarse con una clase explícita en el <body> del
   tema, no con la preferencia del sistema operativo del visitante.*/

/* Tablas -> tarjeta con encabezado gris en mayúsculas, filas separadas por
   líneas finas y esquinas redondeadas. "border-collapse: separate" es
   necesario para que el border-radius de la tabla se note (con "collapse"
   el radio se ignora); "overflow: hidden" recorta las celdas de las puntas
   para que no se salgan del borde redondeado. La primera columna se destaca
   en negrita (patrón "término/explicación", como en la tabla de referencia:
   Problema/Causa probable/Solución).

   Todo lleva "!important": el bloque "Tabla" de Gutenberg envuelve la tabla
   en "<figure class=\"wp-block-table\">", y el selector que el núcleo/tema
   usa para bordes de celda ("table.wp-block-table td/th" o similar) tiene
   MÁS especificidad que ".oc-tabla" (clase + tipo vs. una sola clase) — le
   ganaba a border-collapse/radius/overflow y a los bordes de celda, dejando
   la tabla sin esquinas redondeadas, sin borde propio y con las líneas
   verticales del grid por defecto. En vez de perseguir esa guerra de
   especificidad, se fuerza acá directamente. */
.oc-tabla {
	--oc-tabla-header-bg: #eef0f2;
	--oc-tabla-header-color: #55606d;
	--oc-tabla-border: #ccd2da;
	width: 100%;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	margin: 1.5em 0;
	border: 1px solid var(--oc-tabla-border) !important;
	border-radius: 10px !important;
	overflow: hidden !important;
}

.oc-tabla thead th {
	background: var(--oc-tabla-header-bg) !important;
	color: var(--oc-tabla-header-color) !important;
	text-align: left;
	font-size: .78em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: .9em 1.2em;
	border: none !important;
	border-bottom: 1px solid var(--oc-tabla-border) !important;
}

.oc-tabla td,
.oc-tabla tbody th {
	padding: 1em 1.2em;
	border: none !important;
	border-bottom: 1px solid var(--oc-tabla-border) !important;
	text-align: left;
	vertical-align: top;
	font-weight: 400;
}

.oc-tabla tbody tr:last-child td,
.oc-tabla tbody tr:last-child th {
	border-bottom: none !important;
}

/* Solo en tablas de VARIAS columnas: la primera celda de la fila no es
   también la última (":not(:last-child)"). En una tabla de una sola columna
   (ej. el glosario, una celda "**Término**: definición" por fila) esa única
   celda es a la vez primera y última, así que queda afuera de esta regla y
   conserva el peso normal (400): de lo contrario todo el texto de la
   definición se veía tan pesado como el término en negrita, no solo el
   término mismo (el <strong> ya se renderiza en negrita por su cuenta). */
.oc-tabla td:first-child:not(:last-child),
.oc-tabla tbody th:first-child:not(:last-child) {
	font-weight: 600;
}