/* Conversor a Markdown - estilos del front.
   Se usan variables CSS para que el tema del sitio pueda redefinir
   los colores sin tocar el plugin. */

.conversor-markdown {
	--cmd-borde: #d7dce2;
	--cmd-fondo: #ffffff;
	--cmd-fondo-suave: #f6f8fa;
	--cmd-texto: #1f2933;
	--cmd-suave: #5b6774;
	--cmd-acento: #2b6cb0;
	--cmd-acento-texto: #ffffff;
	--cmd-alerta: #8a6100;
	--cmd-alerta-fondo: #fff7e0;
	--cmd-error: #a02020;
	--cmd-error-fondo: #fdeaea;
	--cmd-radio: 8px;

	max-width: 780px;
	margin: 1.5em 0;
	padding: 20px;
	border: 1px solid var(--cmd-borde);
	border-radius: var(--cmd-radio);
	background: var(--cmd-fondo);
	color: var(--cmd-texto);
	font-size: 15px;
	line-height: 1.5;
	box-sizing: border-box;
}

.conversor-markdown *,
.conversor-markdown *::before,
.conversor-markdown *::after {
	box-sizing: inherit;
}

.conversor-markdown .cmd-titulo {
	margin: 0 0 6px;
	font-size: 1.25em;
	line-height: 1.3;
}

.conversor-markdown .cmd-privacidad {
	margin: 0 0 14px;
	color: var(--cmd-suave);
	font-size: 0.9em;
}

/* Zona de arrastre */
.conversor-markdown .cmd-zona {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 26px 16px;
	border: 2px dashed var(--cmd-borde);
	border-radius: var(--cmd-radio);
	background: var(--cmd-fondo-suave);
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.conversor-markdown .cmd-zona:hover,
.conversor-markdown .cmd-zona:focus-visible,
.conversor-markdown .cmd-zona--activa {
	border-color: var(--cmd-acento);
	background: #eef4fb;
	outline: none;
}

.conversor-markdown .cmd-zona-texto {
	font-weight: 600;
}

.conversor-markdown .cmd-zona-o {
	color: var(--cmd-suave);
	font-size: 0.9em;
}

.conversor-markdown .cmd-archivo {
	margin: 12px 0 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.88em;
	color: var(--cmd-suave);
	word-break: break-all;
}

.conversor-markdown .cmd-opcion {
	display: block;
	margin: 12px 0 0;
	font-size: 0.9em;
	color: var(--cmd-suave);
	cursor: pointer;
}

.conversor-markdown .cmd-opcion input {
	margin-right: 6px;
}

/* Botones */
.conversor-markdown .cmd-acciones {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 12px;
}

.conversor-markdown .cmd-boton {
	padding: 9px 16px;
	border: 1px solid var(--cmd-borde);
	border-radius: 6px;
	background: var(--cmd-fondo);
	color: var(--cmd-texto);
	font: inherit;
	font-size: 0.95em;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s ease, border-color .15s ease;
}

.conversor-markdown .cmd-boton:hover:not(:disabled) {
	border-color: var(--cmd-acento);
	background: var(--cmd-fondo-suave);
}

.conversor-markdown .cmd-boton--principal {
	border-color: var(--cmd-acento);
	background: var(--cmd-acento);
	color: var(--cmd-acento-texto);
	font-weight: 600;
}

.conversor-markdown .cmd-boton--principal:hover:not(:disabled) {
	background: #24598f;
	color: var(--cmd-acento-texto);
}

.conversor-markdown .cmd-boton:disabled {
	opacity: .45;
	cursor: default;
}

/* Progreso */
.conversor-markdown .cmd-barra {
	height: 10px;
	border-radius: 999px;
	background: var(--cmd-fondo-suave);
	border: 1px solid var(--cmd-borde);
	overflow: hidden;
}

.conversor-markdown .cmd-barra-relleno {
	width: 0;
	height: 100%;
	background: var(--cmd-acento);
	transition: width .12s linear;
}

.conversor-markdown .cmd-detalle {
	margin: 6px 0 0;
	min-height: 1.4em;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85em;
	color: var(--cmd-acento);
}

.conversor-markdown .cmd-aviso {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 0.9em;
}

.conversor-markdown .cmd-aviso--alerta {
	background: var(--cmd-alerta-fondo);
	color: var(--cmd-alerta);
}

.conversor-markdown .cmd-aviso--error {
	background: var(--cmd-error-fondo);
	color: var(--cmd-error);
}

/* Resultado */
.conversor-markdown .cmd-etiqueta-vista {
	display: block;
	margin: 16px 0 4px;
	font-size: 0.9em;
	font-weight: 600;
}

.conversor-markdown .cmd-vista {
	display: block;
	width: 100%;
	padding: 12px;
	border: 1px solid var(--cmd-borde);
	border-radius: 6px;
	background: var(--cmd-fondo-suave);
	color: var(--cmd-texto);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85em;
	line-height: 1.45;
	resize: vertical;
}

@media (prefers-color-scheme: dark) {
	.conversor-markdown {
		--cmd-borde: #3a434e;
		--cmd-fondo: #1b2027;
		--cmd-fondo-suave: #232a33;
		--cmd-texto: #e6eaef;
		--cmd-suave: #9aa6b4;
		--cmd-acento: #6aa9e9;
		--cmd-acento-texto: #10151b;
		--cmd-alerta: #ffd48a;
		--cmd-alerta-fondo: #3a2f14;
		--cmd-error: #ffb3b3;
		--cmd-error-fondo: #3d1f1f;
	}

	.conversor-markdown .cmd-zona:hover,
	.conversor-markdown .cmd-zona--activa {
		background: #2a3441;
	}
}

.conversor-markdown .cmd-formatos {
	margin: 10px 0 0;
	font-size: 0.82em;
	color: var(--cmd-suave);
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* Para los formatos que no van pagina a pagina (Word, HTML) no hay
   porcentaje real que mostrar: se anima la barra en vez de mentir. */
.conversor-markdown .cmd-barra-relleno--indeterminado {
	background: linear-gradient( 90deg,
		var(--cmd-fondo-suave) 0%, var(--cmd-acento) 50%, var(--cmd-fondo-suave) 100% );
	background-size: 200% 100%;
	animation: cmd-desliz 1.1s linear infinite;
}

@keyframes cmd-desliz {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

/* El atributo hidden lo pisa cualquier regla de clase con display, porque
   la del navegador ([hidden]{display:none}) tiene menos especificidad.
   Sin esto, ocultar un elemento desde JS con .hidden = true no surtia
   efecto (paso con la casilla de numerar paginas). */
.conversor-markdown [hidden] {
	display: none !important;
}